Styling Bootstrap 3 Popovers

Question

Here is the relevant jsFiddle with full code sample.

Hover your mouse over the road icon to the right of the Fizz menu, and you'll see a popover. See how narrow the popover is? I want to:

• Widen the popover significantly; and
• Style the popover different colors, say:
  • Green background in the popover's "header" section ("Instructions:")
  • Red background in the popover's "body" section (the main text)

According to this answer, I can widen the popover via:

$('[data-toggle="popover"]').popover({
    container: 'body'
});

And that's exactly what I did (see the JS in the jsFiddle), but this obviously doesn't work. And I can't find anything for styling the color of a popover. Any ideas?

Answer 1

You can apply some CSS to the classes for the popover to achieve this result.

In the fiddle you provided, you can achieve the effects you want for the 'signin' element with the following lines:

.signin .popover { min-width:300px; }
.signin .popover-title { background-color:green; }
.signin .popover-content { background-color:red; }