debugging a trigged on hover tooltip style

At $WORK we have a tooltip component triggered on hover via javascript:

Showing tooltip behaviour

Normal stuff.

But I needed to debug its styling. I know how to do that when it’s a css state, just use dev tools and set up an element state to hover.

Here, however, state is triggered via javascript, so it won’t work.

The solution, simply enough, is to go to the Debugger section, do the action (here hovering), then press F8, which is shortcut for pausing the execution.

Then it’s just a matter of using the inspector to play with the styles:

State when debugger is turned on