19

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.

123
  • 515
  • 1
  • 5
  • 20
camcam
  • 2,585
  • 8
  • 49
  • 65
  • Possible duplicate of [:hover state in Chrome Developer Tools](http://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools) – 123 Sep 15 '13 at 18:26

9 Answers9

11

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

maosmurf
  • 1,858
  • 17
  • 16
  • 2
    This worked for me like a month ago but doesn't now :( Once I hit the hot key the tooltip disappears. My solution was to run `setTimeout(function(){debugger}, 1000)` in the console, switch back quickly and get the tooltip up. – Ash Berlin-Taylor Apr 18 '19 at 15:05
  • This was really useful – Pablo Jun 03 '20 at 14:35
10

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.

user3199365
  • 633
  • 1
  • 6
  • 8
10

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

Muhammed Abdelfattah
  • 125
  • 1
  • 3
  • 9
7

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

AnnieP
  • 350
  • 1
  • 6
  • 13
  • 2
    `$('.selector').tooltip('show')` for Bootstrap tooltips – LateralFractal May 23 '17 at 00:50
  • 1
    Good suggestion. In chrome, you can also right-click on the element markup in "Elements" and add an attribute such as an ID in real time if there isn't a good selector to use... – Dave Smash Jan 24 '20 at 16:14
3

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

Aref Ben Lazrek
  • 1,056
  • 1
  • 11
  • 19
0

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.

Carter
  • 2,850
  • 9
  • 44
  • 57
  • Yes, but which CSS to modify? For example, on this page: http://jqueryui.com/tooltip/ - if I want to interactively style the tooltip that appears when hovering over the input box ("Your age"), what to do? As far as I noticed, moving the mouse out does not just hide the tooltip, but deletes it from the DOM. – camcam Sep 15 '13 at 18:54
  • So it seems, my solution won't work here then. You could look into using a custom div for the tooltip instead of the default title attr. However, I don't see an option for that in the small amount of googling I just did. – Carter Sep 15 '13 at 20:26
0

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.

123
  • 515
  • 1
  • 5
  • 20
  • This was the first thing that I tried. But as I wrote in my question, checking the ":hover" state in Inspector doesn't make the tooltip appear, it seems to have no effect on javascript events. – camcam Sep 15 '13 at 18:58
0


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

Community
  • 1
  • 1
Ian Campbell
  • 2,678
  • 10
  • 56
  • 104
  • I found some [fiddle](http://jsfiddle.net/HjPtJ/55/), added the debugger command and added the Watch manually (right click didn't work). However, I can't find find the Constructor->DEFAULTS->template, here is the structure that I see: http://s25.postimg.org/7enmrwe9r/img11.jpg – camcam Jun 16 '14 at 07:32
  • @camcam -- Wow weird, it appears that jsFiddle augments any JavaScript objects created, so it's probably not possible to see this way. To reproduce what I did, you will need to have this code running in your own HTML. – Ian Campbell Jun 17 '14 at 03:38
  • I checked this on my real site but the DEFAULTS->template wasn't there anywhere. Also, the tooltip html structure you found is different than what I found (in my answer). Maybe the jQuery ui version was different (I use 1.10). – camcam Jul 01 '14 at 18:27
0

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

camcam
  • 2,585
  • 8
  • 49
  • 65