Twitter Bootstrap Popovers - multiple widths and other CSS properties

twitter-bootstrap

Solution

You can override the default template with your own and then style it how you want with css.

Here is 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 setting the width to 300px. You would want to add your own class name to the element and style it with your own stylesheet.

Problem

Is it possible to use multiple popovers of different widths, margins, paddings, etc. on the same web page? I want to use a popover with 300px width for table fields and popover with 200px width for links. I'm familiar with CSS properties of popovers, but don't know how to use multiple popovers with different CSS properties.

Original source