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](http://jsfiddle.net/mddc/4JGx9/9/).

```
<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. Enable the [*Script* panel](https://getfirebug.com/wiki/index.php/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.

![enter image description here](https://i.stack.imgur.com/Xgo5G.jpg)

6. Press the *Step Over* button (![enter image description here](https://i.stack.imgur.com/fnAZm.png)) or press `F10` once, so the element is added to the DOM
7. Switch to the [*HTML* panel](https://getfirebug.com/wiki/index.php/HTML_Panel)

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

![enter image description here](https://i.stack.imgur.com/fFDTy.jpg)
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>