HTML Tooltip debug tip

While developing an HTML Tooltip, it’s very hard to inspect it on browser development tools, since hovering the mouse over the Toooltip causes it to disappear:

Any trial to inspect the Tooltip causes it to disappear

To work around this issue use the following neat trick:

1. Open browser development tools
2. Go into console and paste this snippet:

setTimeout(() => {debugger;}, 3000)

3. This snippet will give you 3 seconds to hover the HTML element that expose the Tooltip. After 3 seconds the debugger will be opened, and the DOM will be “stuck” with your Tooltip open

4. Switch to Elements tab on the developer tools and inspect the Tooltip. Now you can treat it as normal DOM element, and apply any style and content you want.

5. Release the debugger and look how your Tooltip behave now

Hope you find it useful! 👏