Debug popups that appear on hover using JS

Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.

Categories: Supported by:

Debug popups that appear on hover using JS

Have you ever been frustrated because you couldn't style a popup or tooltip that appeared on hover? If it uses JavaScript to get displayed, it's hard to style without modifying the code to make it stay visible.

  1. Switch the Sources/Debugger panel.
  2. Then hover the element in the page so the popup appears, and leave the mouse there.
  3. Now press F8 to pause the debugger.

That's it! The JS engine will pause and freeze the state of the page. You can now switch back to Elements/Inspector and style the popup content!

Animation showing how to pause the debugger with F8 while a tooltip is visible to then style it in the Inspector panel of Firefox.

Thank you to Sam Selikoff for tweeting about this tip and making a youtube video about it too:

See also

Authors: Patrick Brosset

Last edit: - Edit page