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

If you open the developer tools in the newest Google Chrome you should see the elements tab is selected. On the element you have to hover on you just right click on it and open the 'Force element state' menu to select the :hover option.

Answer 2

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.

Answer 3

You can't change a jQuery tooltip's styling in a browser's inspector, because as you are saying it is removed from the DOM on mouseout.

However, with the following code this is what I did to change to change the styling:

$("#myElement").attr({
    title: "my tooltip text"
}).tooltip();

$("#myElement").tooltip({
    // the .tooltip class is applied by default anyway
    tooltipClass: "tooltip"
});

1. Type debugger; in the JavaScript, before the previous code

2. In Firefox, hit F12 to open Firebug (download it if you don't have it)

3. Select the Script tab and click Reload

4. Now that the debugger is activated, highlight $("#myElement").tooltip from the 2nd code block (without the parentheses), right-click the highlighted text, and select Add Watch

5. Under the Watch tab in the right window, click on + next to $("#myElement").tooltip to expand all the properties

6. Under that expand Constructor, then DEFAULTS, and then template to see the HTML that the tooltip is made of

This is then the exposed HTML structure of a jQuery tooltip:

<div class="tooltip">
    <div class="tooltip-arrow"> ... </div>
    <div class="tooltip-inner"> ... </div>
</div>

...and now you can apply CSS, something like this:

.tooltip {
    background-color: blue;
    border: 2px solid black;
    border-radius: 5px;
}
.tooltip-arrow {
    /* hackery, placing the arrow where it should be: */
    margin-bottom: -7px;
}
.tooltip-inner {
    /* hackery, making all browsers render the width correctly: */
    width: 300px;
    min-width: 300px;
    max-width: 300px;

    /* hackery, removing some unknown applied background: */
    background: none;
    background-color: none;

    color: white;
    text-align: center;
}

All the "hackery" mentioned in the CSS above is what I had to do to get Bootstrap to play nicely with jQuery (they both have a tooltip, which can conflict with each other -- see https://stackoverflow.com/a/19247955 for more info).

Answer 4

the easy way is to pause js with F8 when tooltip is shown

Answer 5

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 6

Here is what I did:

jQuery(".myDiv").attr("title", 'Hello');
jQuery(".myDiv").tooltip({close: function( event, ui ) {
  console.log(jQuery(ui.tooltip[0]).html());
}});

And the console content was:

<div class="ui-tooltip-content">Hello</div>

Also, I placed a breakpoint on the console.log function and then examined the page structure before the </body> end tag, and there was something more:

<div id="ui-tooltip-0" role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" style="position: relative; top: -463.60003662109375px; left: 1px; display: block; opacity: 1;"><div class="ui-tooltip-content">Hello</div></div>

It was possible to change the tooltip styling on the fly using Inspector (tested in Chrome).