CODEWITHSUNDEEP
javascriptgoogle-chrome
camcam
camcam

Reputation: 2627

How to inspect JQuery UI tooltip?

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.

Upvotes: 19

Views: 16962

Answers (9)

Muhammed Abdelfattah
Muhammed Abdelfattah

Reputation: 145

In Chrome follow the following steps: 1- Open Developers Tools ( Ctrl + Shift + I ) or (right click on screen and select inspect).

2- Choose Sources: Choose Sources

3- On the right side, you found accordion, Open "Event Listener Breakpoints" 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". Open "Mouse", then Select "mouseout"

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. 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). selecting the blue button to resume the execution of code

In Firefox the same, the difference in "Sources" tab is named "Debugger".

Upvotes: 12

Aref Ben Lazrek
Aref Ben Lazrek

Reputation: 1064

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

Upvotes: 3

AnnieP
AnnieP

Reputation: 370

I'm late to the party, but there is actually a simple way to accomplish this.

In your browser's dev console, use jQuery to target the tooltip as follows:

$('.selector').tooltip('open');

In my case, for instance, I have a class .grey-tooltip on my tooltip, so I call $('.grey-tooltip').tooltip('open');. This should open the tooltips and you can then inspect them as you would any other visible element.

Different methods you can use one tooltips are described in their docs here: https://api.jqueryui.com/tooltip/.

Upvotes: 7

maosmurf
maosmurf

Reputation: 1946

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

Upvotes: 11

user3199365
user3199365

Reputation: 663

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.

Upvotes: 10

camcam
camcam

Reputation: 2627

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

Upvotes: 0

Ian Campbell
Ian Campbell

Reputation: 2748


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

Upvotes: 0

123
123

Reputation: 525

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.

Upvotes: 0

Carter
Carter

Reputation: 2870

It should be possible to modify the CSS such that the tool tip is always visible as opposed to on hover only, at which point you could tweak the div's styling via the inspector and see how it's affected real-time.

Upvotes: 0

Related Questions