How to inspect JQuery UI tooltip?

Question

I have a default JQuery UI tooltip function call on my page. Is there a way to style the tooltip div interactively using the Inspector? If I had two mouse pointers, one woul

Answer 1

I'm late to the party, but there is actually a simple way to accomplish this.

In your browser's dev console, use jQuery to target the tooltip as follows:

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

In my case, for instance, I have a class .grey-tooltip on my tooltip, so I call $('.grey-tooltip').tooltip('open');. This should open the tooltips and you can then inspect them as you would any other visible element.

Different methods you can use one tooltips are described in their docs here: https://api.jqueryui.com/tooltip/.

Answer 2

It should be possible to modify the CSS such that the tool tip is always visible as opposed to on hover only, at which point you could tweak the div's styling via the inspector and see how it's affected real-time.

Answer 3

In Chrome follow the following steps: 1- Open Developers Tools ( Ctrl + Shift + I ) or (right click on screen and select inspect).

2- Choose Sources:

3- On the right side, you found accordion, Open "Event Listener Breakpoints"

4- You will found all events, Open "Mouse", then Select "mouseout" event, this will stop execution of code and stop before "mouseout action".

5- Go to App screen, and Try to hover only the item which has the tooltip, then screen will freeze, and you will found the tooltip stand as you want.

Note: If you hovered other item by wrong, you can resume the execution of code by clicking resume (blue button), and then try hover again. If you want to return to the normal execution of code, Deselect the "mouseout" event, and click resume (blue button).

In Firefox the same, the difference in "Sources" tab is named "Debugger".