1

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?

Community
  • 1
  • 1
smeeb
  • 27,777
  • 57
  • 250
  • 447

1 Answers1

2

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; }
Marcelo
  • 4,395
  • 1
  • 18
  • 30
  • Thanks @Celmar (+1), unfortunately those changes don't work for me. Would you be willing to update my jsFiddle in case I'm botching it somehow? Thanks again! – smeeb Nov 04 '14 at 15:54
  • Sure, I had to add an id to an element to do it for the field mode popover. http://jsfiddle.net/97zp5ckq/2/ – Marcelo Nov 04 '14 at 16:15