Inspect element that only appear when other element is mouse overed/entered

Question

Often I want to inspect an element (e.g. tooltip) that only appears when another element is mouse overed/entered. The element that appears, is made visible via jQuery's mouseenter event.

I can't inspect the tooltip, since the tooltip disappears when my mouse leaves the containing element.

Is there a way to pause JS events so I could hover on the element, then pause the browser's JS, and successfully inspect it?

For an example, try inspecting Twitter bootstrap's tooltips: http://getbootstrap.com/javascript/#tooltips.

Answer 1

It's fairly easy in Chrome 38.0.2094.0.

Here's what it'll look like:

Step-by-step:

1. Open the DevTools in the Sources panel
2. Make the tooltip appear by hovering over the button
3. Press F8 to freeze the page
4. Switch to the Elements panel and use the magnifying glass icon in the top left to select the tooltip

If the tooltip shows up because of CSS, here's what you can do in that case:

Step-by-step:

1. Open the DevTools
2. Select the triggering element in the dev tools (the link)
3. Right click, and select "force element state", and select ":hover"
4. Inspect the CSS tooltip

Answer 2

Both Safari's and Chrome's Web Inspector offers checkboxes where you can toggle the :active, :focus, :hover and :visited state of an element. Using those might be even easier.

Safari:

Chrome:

Answer 3

There's also another tricky way to do it :

1. Go over the element which makes your tooltip appear.
2. Right click to open the contextual menu.
3. Move your mouse to your dev tool window and left click anywhere in the dev tool panel.

Your tooltip will stay visible, you will then be able to inspect it in the Element tab.

Tested on Chrome. Doesn't seem to work on Firefox.

Answer 4

While @SomeGuy's answer is excellent (t-up for animated gifs), as an alternative you can always do it programmatically. Just pop open the console and type in the event name

document.getElementById('id').dispatchEvent(new Event('event-type'));

(with pure javascript specific syntax may vary by browser)

Even easier with jQuery:

$('#id').trigger('event-type');

In your example (http://getbootstrap.com/javascript/#tooltips), open the console and type in, for example:

$("button:contains('Tooltip on right')").mouseenter();

And the tooltip appears in the DOM and can be manually inspected/modified:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

---

As in the comments, if you move the mouse pointer over the page frame, you can trigger other events such as mouseout. To prevent this you can press F8 (as in the acc. answer) or type debugger; (which is its script equivalent)