Twitter Bootstrap Popovers - Multiple Width and Other CSS Properties
Is it possible to use multiple popovers of different widths, margins, paddings, etc. on the same web page?
I want to use a 300px wide popover for table fields and a 200px wide popover for links.
I'm familiar with the CSS properties of popovers, but I don't know how to use multiple popovers with different CSS properties.
+3
source to share
1 answer
You can override the default template with your own and then create it however you want with css.
Here's an example:
$("#example").popover({
placement : 'bottom',
template: '<div class="popover" style="width: 300px"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
content : "Your content goes here."
});
Notice the inline style that sets the width to 300px. You would like to add your own class name to the element and create it with your own stylesheet.
+4
source to share