Firefox and Firebug: how to inspect dynamically generated Bootstrap tooltip?

Question

I would like to add a CSS class to a Bootstrap (3.x) tooltip, but it seems not working. So I would like to use Firebug to inspect the tooltip content. However, when I move my mouse to the Firebug area, the dynamically generated tooltip disappers.

How can I inspect a dynamically generated Bootstrap tooltip?

Here is the jsfiddle link.

<label>
Some Text 
<a href="#" data-toggle="tooltip" title="Tooltip goes here!">?</a>
</label>

$(function() { 
    $('[data-toggle="tooltip"]').tooltip({
        'animation': true,
        'placement': 'top' 
    });
});

Thanks!

Answer 1

1. Enable the Script panel
2. Reload the page
3. Inspect the <label> element containing Some Text?
4. Right-click the element and choose Break On Child Addition or Removal from the context menu
5. Move the mouse over the question mark => The script execution will stop and you'll see a hint showing you the tooltip element.

6. Press the Step Over button () or press F10 once, so the element is added to the DOM
7. Switch to the HTML panel

=> There you'll see the <div> containing the tooltip and you'll be able to check its styles.

Answer 2

I was looking for How to inspect a JQuery tooltip in firebug

1. Inspect the element in Firebug
2. Select the "Event" tab to the right
3. Disable the mouseoutevent.
4. Now when the mouse is gone from the element, the tooltip stays. Can be inspected as any other element via FireBug.

Here is a small video: https://youtu.be/msTU8JDnaBU

Answer 3

I found that the only MAIN step (instead of steps 1-5 in the accepted answer of Sebastian Zartner) is to FIRST enable Firebug's HTML tab's "Break On Mutate" button. It is the most left-top button in that tab.

With just this step, JavaScript will be paused when there is dynamically shown tool-tip. Then, you could inspect the CSS style, or use Script's step over button to see the Javascript line of that tooltip.

Firebug version is 2.0.17