Welcome to the LimeSurvey Community Forum

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

Hover popover of an image

More
6 years 11 months ago #190182 by Rikke1993
In my explanation of the topic of my survey I want to use some pictures to make it more clear. However, I don't want to place them within the text but rather as a hover popover. I am able to do that with text but it doesn't work with images.

The closest I got was was with these two tries:



The first one creates a hyperlink to a different page
The second results in this:




Does anyone know if it is possible to make something like this?
The topic has been locked.
More
6 years 11 months ago #190190 by Joffm
Replied by Joffm on topic Hover popover of an image
Hi,
have a look here
www.tutorialrepublic.com/faq/how-to-inse...ootstrap-popover.php
Code:
<script> $(document).ready(function(){ $('[data-bs-toggle="popover"]').popover({ placement : 'bottom', trigger : 'hover', html : true, content : '<div class="media"><a href="#" class="pull-left"><img src="//tutorialsplane.com/wp-content/uploads/2016/03/CaptureAdmin.png" class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">Jhon Carter</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>' }); }); </script>
Code:
<button class="btn btn-primary" data-bs-toggle="popover" type="button">Here is the popover</button>



Finetuning is up to you.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
More
6 years 11 months ago #190191 by Rikke1993
Replied by Rikke1993 on topic Hover popover of an image
Hey,

Thanks so much. That was exactly what I was looking for
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose