jQuery UI keep tooltip open for debugging (to style it)

Question

I'm trying to style the jQuery UI tooltip but it keeps closing. I've tried the following with no success:

 $("td label").tooltip({

    disabled: true,
    close: function (event, ui) { return false; }

 }).on("click", function () {

    $(this).tooltip("open");
 }).off('focusout mouseleave mouseenter');

Nothing seems to keep it open. When I right click on it to go to Firebug, it vanishes before I have a chance.

Demoniac

What if you don't specify this off('focusout mouseleave mouseenter'); – Blende

Nope, still vanishes. – Demoniac

Answer 1

Call the open method on your tooltips, that will make them stay opened

$("td label").tooltip().tooltip("open");

Shrubbery

Note this only works with non-delegated tooltips. See https://mcmap.net/q/747331/-open-many-tooltips-at-once-with-jqueryui for another option. – Hoang

Answer 2

Much better option is to pause js execution.

1. Open Console
2. Switch to Sources tab
3. Hover something for tooltip to appear
4. Click F8 button (maybe different, hover the Pause icon to check the hotkey)

Thermic

This is the right answer for debugging purposes only. No code modifications. – Nephralgia

this should be the accepted answer as no code is modified! – Offload

Big Thank you, now it seems evident... but I wasted some time trying to debug the autocomplete feature of jquery-ui, which disappears with any click. – Karlkarla

Answer 3

If it is only for the purpose of debugging, why not use the hide option and set a really long duration.

$("td label").tooltip({ hide: {duration: 1000000 } });

Mariano

Or use delay, like this: hide: {delay: 1000000 }. – Numskull

Answer 4

For v4.1.5 of tooltipster use the delay option like this.

$('.tooltip').tooltipster({
   interactive:true,
   animation: 'grow',
   delay:[100, 10000000]
});

The second delay value, specifies the closing delay for the tooltip. Reference: http://iamceege.github.io/tooltipster/#options

Hoang

Answer 5

Both of the previous answers didn't help me as one didn't work on non-delegated tooltips, whereas with the other method I could not play around with CSS in the dev panel. The tooltip did stay open, but I could not uncheck any checkboxes against any CSS like I would normally or type in more CSS - to get to a solution before implementing it.

Ultimately I used the debugger statement to break in my code after tooltip was opened.

Example:

jQuery(".myElement").tooltip({
    open: function (event, ui) {            
            debugger;
    }
});

When that breakpoint is hit, evaluate this in the console:

$(".ui-tooltip-content")

And then right click on results of the evaluation in console and choose Reveal in Elements panel to work with it just like any other element on the page. This is especially helpful when tooltip content is constructed dynamically (like in my case).

Buncombe