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 would be hovering over an element to keep the tooltip displayed and second would be using the Inspector and build the style. But I only have one mouse and as soon as it moves off the element, the tooltip disappears. Checking the ":hover" state in Inspector doesn't help. the tooltip disappears on mouse out.

I am using Chrome, but any trick in any browser would do.

Answer 1

My working solution in Firefox:
1. hover over tooltip (tooltip is shown)
2. hit CMD-Option-K (OSX) or CTRL-Shift-K (Windows), to open "Web Console"
3. type "debugger" (this will stop JS execution, so tooltip won't disappear)
4. open "Inspector" Tab, search for .ui-tooltip
5. edit as necessary. note: changes to CSS will work immediately, even if execution of JavaScript is stopped

Answer 2

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".

Answer 3

I found a workaround how to temporary inspect it :

just implement hide settings where you hookup the tooltip logic:

hide: {
          effect: "slideDown",
          delay: 20000
      }

This gives you 20 sec time to inspect it. If you need more time then increase the "delay" attribute. Here is my working code for page jquery tooltips:

    $(function() {
    $(document).tooltip({
            tooltipClass: "jqueryTooltip",
            content: function() {
                return $(this).attr('title');
            },
            hide: {
                effect: "slideDown",
                delay: 20000
            }
        });
    });

After you are done with the inspection just remove the delay and you are done.

Note: I am using custom class "jqueryTooltip" to style the tooltip after inspection.