Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Popover/Modal doesn't work

  • jan.philipp.thomeczek
  • jan.philipp.thomeczek's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 months 1 week ago #264689 by jan.philipp.thomeczek
Popover/Modal doesn't work was created by jan.philipp.thomeczek
Please help us help you and fill where relevant:
Your LimeSurvey version: 6.5.6 Cloud
Own server or LimeSurvey hosting: LS Hosting
Survey theme/template: Fruity 23
==================
Good morning everyone,
I'm trying to get a popover working.
I used the Joffm Template LSS file (from his tutorial www.mafosurvey.de/lime/Tutorial_Gimmicks.pdf ), but I only see a very small box with only the title displayed.  Tried the original code from bootstrap ( getbootstrap.com/docs/3.4/javascript/#live-demo-1 ), same issue. Also, I would like to have a bottom popover, which doesn't work at all.
I tried with Firefox and Chrome, to rule out that this is a browser restriction.

The modal text would maybe even be better, but the example from the Joffm JSS doesn't work at all - not sure if there needs to be something added?
Hope someone can help!

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 months 1 week ago #264692 by Joffm
Replied by Joffm on topic Popover/Modal doesn't work
Hi,
as mentioned in the tutorial some of the shown examples are not yet compatible with LS 6.x.
LS 6.x. is now based on bootstrap 5 instead on bootstrap 3


If you compare the two examples on the bootstrap pages you see that there is an additional "-bs" in the option names.
bootstrap 3
Code:
[code]<button type="button" class="btn btn-default" 
    data-container="body" 
    data-toggle="popover" 
    data-placement="top" 
    data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top
</button>
[/code]
bootstrap 5
Code:
[code]<button type="button" class="btn btn-secondary" 
    data-bs-container="body" 
    data-bs-toggle="popover" 
    data-bs-placement="top" 
    data-bs-content="Top popover">Popover on top
</button>
[/code]

So the best is to copy and adapt the code of the bootstrap 5 examples
 

Joffm
 

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: tpartner, jan.philipp.thomeczek

Please Log in to join the conversation.

  • jan.philipp.thomeczek
  • jan.philipp.thomeczek's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 months 1 week ago #264694 by jan.philipp.thomeczek
Replied by jan.philipp.thomeczek on topic Popover/Modal doesn't work
Thanks a lot! I missed that, indeed. Here's a piece of code that works, in case someone is interested. The last part helps to adapt the width to the scree size.
Code:
<script>$(function () {
  $('[data-bs-toggle="popover"]').popover()
})
</script><button class="btn btn-lg btn-danger" data-bs-content="Info Text" data-bs-placement="bottom" data-bs-toggle="popover" title="Header of Box" type="button">Button Text</button>
<style type="text/css">.popover{
            max-width:600px;
        }
</style>
 

Please Log in to join the conversation.

Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose