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

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:

    
 ... 
    
 ... 

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