How to debug a popover?

Question

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!

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 1

Nobody really answered the question "How to debug a popover" ::: Simply set the popover to open on load >> $('#element').popover('show')

Answer 2

What I do is kind of weird and only seems to work in Chrome, not Firebug. The steps are:

1. Open the Chrome inspector in a new window
2. Make sure part of the inspector is overtop of the button you're trying to activate (which is in the background window
3. Activate the browser window and hover over the button (this activates the popup), now hit alt+tab (cmd+` on OSX) to switch to the inspector window.
4. This will not trigger the mouseOut event and leave your popup attached to the DOM body node! Since you're already in the inspector you can navigate to it and see the css problem.