9

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)

Leahcim
  • 40,649
  • 59
  • 195
  • 334
  • 3
    You're undoubtedly mixing your own CSS with Bootstrap. Your own CSS then breaks bootstrap, it's really that simple. – Tom van der Woerdt Dec 27 '11 at 02:25
  • What version of firefox are you using , I am not getting the same problem on firefox or chrome – Gautam Dec 27 '11 at 02:26
  • I think you misunderstood the quetsion. The popover on jsfiddle is perfect (in my browser and yours) but on my local site (which only i can see) it's broken, no matter what the browswer. You can't see the code on my local site. – Leahcim Dec 27 '11 at 02:26
  • the image in the OP is taken from my localhost. There's no problem with the code on the fiddle. – Leahcim Dec 27 '11 at 02:27
  • 1
    The only logical solution is what @TomvanderWoerdt suggested – Gautam Dec 27 '11 at 02:28
  • [Here's a quick hack](http://jsfiddle.net/qVdEy/7/) I came up with. It copies the popover HTML into the body so it's always displayed. – Bojangles Dec 27 '11 at 02:31
  • 2
    I know that my implementation is obviously creating the problem--that's simple--but my question asked "how to debug popover" because everytime I try to read the css using firebug, the popover disappears. I can't figure out the source of the problem – Leahcim Dec 27 '11 at 02:31
  • @Michael: http://stackoverflow.com/questions/1080803/how-to-debug-css-javascript-hover-issues – naveen Dec 27 '11 at 02:34
  • Have you looked at my JSFiddle in my comment? It clones the popover HTML into the body so it doesn't disappear, so it can be inspected with Firebug as usual. – Bojangles Dec 27 '11 at 02:34
  • @JamWaffles thanks, I was still trying to figure out yours. Thanks for the explanation. Neat. – Leahcim Dec 27 '11 at 02:40

5 Answers5

32

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

John Montgomery
  • 1,945
  • 2
  • 16
  • 20
  • 2
    This should be the accepted answer provided that the question is asking about how to debug. – Tariqulazam Feb 10 '16 at 22:00
  • 1
    Just what I was looking for, you can also add that command in the "watch" panel. – guilleva Apr 08 '16 at 17:45
  • Additionally, in i.e. Firefox DevTools you can select the triggering element in Inspector, right-click "Use in Console" and do something like `$(temp0).popover('show')` – retrovertigo Nov 13 '17 at 02:56
4

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.
Ryan953
  • 688
  • 4
  • 11
  • 1
    this kinda worked for me, but as soon as i move my mouse after step 3 somehow the mouse-out event actually is triggered even though it's not the active window anymore :( but it does appear in the console before this, but I can't see the element because I can't scroll to see it in the Chrome Inspector before it disappears – FireDragon Mar 23 '13 at 01:00
2

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 :)

Andrew Odri
  • 8,868
  • 5
  • 46
  • 55
0

This is the kind of thing I created my new HTML box visualizer tool for. Check it out!

HTML Box Visualizer - GitHub

Gabriel McAdams
  • 56,921
  • 12
  • 61
  • 77
0

open devtools of the browser, then set a breakpoint of Mouse Click. Just Click the target of popover panel and U will see the opening popover. Just debug it like other normal DOM block

cici
  • 1
  • Usually providing the user with an example can help them understand how to implement your suggestions. Especially given they provided a fiddle, focusing on how the user can amend their fiddle to garner the results you're suggesting is far more helpful then simply stating a method. – Ja Superior Feb 05 '23 at 15:44