Leahcim Leahcim - 1 month ago 21
CSS Question

How to debug a popover?

On this fiddle http://jsfiddle.net/mjmitche/qVdEy/6/, you can see that the alignment of the text inside the popover is perfect, however, when I put the exact same css/js/html on my site, the text is larger than the container!

enter image description here

I'm trying to figure out what is happening using firebug, but I have to move my cursor off the popover to use firebug, and then the firebug disappears. I can't figure out what settings in my code is changing the presentation. The popovers are created using Twitter Bootstrap.js (you can see the resources in the fiddle)

Answer

Well after looking at the popover CSS, it seems there is no explicitly defined font-size: http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css (Just do a find on "popover" and look through the CSS)

Perhaps try adding the following CSS and tweaking it from there:

.popover, .popover h3.title, .popover .content { font-size: 14px; }

Hope that helps :)