Inspect hovered element in Chrome?

Question

F8 will pause debugging.

On Mac, you may need to have the 'Sources' tab of the developer tools open.

Mouse over the tooltip, and press F8 while it is displayed.

You can now use the inspector to look at the CSS.

I actually found a trick to do that with the Twitter Bootstrap tooltips. If you open the dev tools (F12) on another monitor, then hover over the element to bring up the tooltip, right click as if you were to select 'Inspect Element'. Leaving that context menu open, move the focus over to the dev tools. The html for the tooltip should show up next to the element its a tooltip for in the HTML. Then you can look at it as if it were another element. If you go back to Chrome the HTML disappears so just something to be aware of.

Kind of a weird way but it worked for me so I figured I would share it.

This solution works without any extra code.

Hit command-option-j to open the console. Click the window-looking button on the top right corner of the console to open the console in a different window.

Then, in the Chrome window, hover over the element that triggers the popover, hit command-` however many times you need to focus on the console, then type debugger. That'll freeze the page, then you can inspect the element in the Elements tab.

You would just need to force the tooltip to show as such

$('.myelement').tooltip('open');

Now the tooltip will show regardless of hovering state.

Scroll down near the bottom of the DOM where you should see the markup.

Update see cneuro's comment for Bootstrap 3.

$('.myelement').tooltip('show');

Update see Marko Grešak's answer for Chrome and apparently Safari as well, $0 can be used as a shortcut for the currently selected element. This appears to work in Safari as well.

$($0).tooltip('show')

Click f12 go to the console tab and add the following:

setTimeout(()=> {debugger},5000)

This will give you 5 seconds to do whatever you want and it will break at 5 seconds. Then you can inspect the target element

(ex. hover the element and wait 5 seconds then inspect..)

For me, the accepted answer didn't work: clicking in DevTools immediately closed the ToolTip.

However, I found https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution which helped me:

1. In the console:, Run:

    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });

2. Highlight element with inspector

3. Hit F12

You can now inspect the element, with JavaScript paused so the DOM won't change.