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.

Answer 1

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

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

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)

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 } });

Answer 4

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

Answer 5

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