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

Don P picture Don P · Jul 16, 2014 · Viewed 16.2k times · Source

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

Some Guy picture Some Guy · Jul 16, 2014

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