121

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.

Sarbbottam
  • 5,410
  • 4
  • 30
  • 41
Don P
  • 60,113
  • 114
  • 300
  • 432
  • 9
    Just FYI, if the element appears because of CSS instead of JS, you can force a `:hover` on it by right clicking on the element in the Elements (DOM) view in Dev Tools, selecting "Force Element State" and then ":hover". – MMM Jul 17 '14 at 08:56

4 Answers4

228

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
Some Guy
  • 15,854
  • 10
  • 58
  • 67
  • Then switch back to Elements and locate the source for the tooltip in HTML (because I don't think in this mode interactive "Inspect Element" is available) – Yuriy Galanter Jul 16 '14 at 20:34
  • 1
    @YuriyGalanter It's available via the spyglass icon in the top left. Just click on the icon, then click on the tooltip :) – Šime Vidas Jul 16 '14 at 20:40
  • 3
    Yeah, I added a GIF to make it easier to see what I'm doing. – Some Guy Jul 16 '14 at 20:41
  • Wait... not to be off topic but how did you make a gif of a screenshot that easily??? – Don P Jul 16 '14 at 20:42
  • 2
    @DonnyP I used `byzanz-record`. It's a package you can get with `sudo apt-get install byzanz`. – Some Guy Jul 16 '14 at 20:45
  • 5
    There's also [LICEcap](http://www.cockos.com/licecap/), it records a portion of the screen directly in a super-optimized GIF. Windows, OS X and Linux. – fregante Jul 17 '14 at 07:26
  • I am a developer & I use FF, any way to do the same in that. – VenomVendor Jul 17 '14 at 09:22
  • 1
    @VenomVendor: FF has exactly the same feature, it's also assigned to F8. – MMM Jul 17 '14 at 09:27
  • 1
    What's the keyboard shortcut for OS X? It's not F8 and hovering over the pause icon in the debugger shows that you should use `%s`, which seems to be a format string. Screenshot: http://i.imgur.com/Vtagxzi.png – Tyilo Jul 17 '14 at 11:54
  • @SomeGuy I guess there was something wrong with my chrome version as the text has been changed to `F8` and it works now. ;) – Tyilo Jul 18 '14 at 20:59
  • 2
    @bfred.it LICEcap is *not* available for Linux. [See this Github issue](https://github.com/lepht/licecap/issues/1) on the topic. Seems folks are having success running it with [WINE](http://www.winehq.org/). – Isaac Gregson Jul 19 '14 at 07:26
15

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:

The checkboxes in Safari

Chrome:

The checkboxes in Chrome

hopper
  • 13,060
  • 7
  • 49
  • 53
zıəs uɐɟəʇs
  • 1,728
  • 3
  • 14
  • 27
  • 5
    The tooltip isn't triggered by `:hover` styles. – Šime Vidas Jul 17 '14 at 12:05
  • 2
    Firebug on Firefox has the same thing (minus `:visited`, which is restricted to prevent snooping) - on the HTML tab, it's in the "Style" dropdown on the right – Izkata Jul 17 '14 at 12:57
  • 1
    @Izkata For Firefox's native developer tools, right-click the element in the breadcrumbs, or the HTML/DOM tree, and pick from `:hover`, `:active` or `:focus`. – K893824 Jul 18 '14 at 10:16
4

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.

Nicolas Forney
  • 868
  • 2
  • 13
  • 21
3

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)

Community
  • 1
  • 1
blgt
  • 8,135
  • 1
  • 25
  • 28
  • 1
    Whilst inspecting the element you can still trigger other events (like `mouseout`), so it doesn't solve the problem in the first place. You have to be quite careful when selecting it. But it is an alternative approach. – MMM Jul 17 '14 at 17:04