Menu
The canonical example for Twitter Bootstrap's popover feature is sort of a tooltip on steroids with a title.
HTML:
<a href="#" id="blob" class="btn large primary" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A title">hover for popover</a> JS:
<script> $("#blob").popover({offset: 10}); </script> I'd like to use popover to display an image. Is this possible?
658
Answer: Use the Popover's content Optionpopover() method to insert the images inside the popovers. You can also set this option using the data-content attribute.
To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.
To create a popover, add the data-bs-toggle="popover" attribute to an element. Note: Popovers must be initialized with JavaScript to work.
Set the trigger option of the popover to hover instead of click , which is the default one. Or with an initialization option: $("#popover"). popover({ trigger: "hover" });
Very simple :)
<a href="#" id="blob" class="btn large primary" rel="popover">hover for popover</a> var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />'; $("#blob").popover({ title: 'Look! A bird!', content: img, html:true }); http://jsfiddle.net/weuWk/
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
