Inspect hovered element in Chrome?

Question

I am trying to view, through Chrome's developer tools, how tooltips are structured on a site. However, even when I am hovered over the item, when I "inspect element", nothing shows for the tooltip in the html. I know I can set the Style to :hover, but I still can't see the html or css of the tooltip.

Any ideas?

[You can found other solution here](https://stackoverflow.com/a/58207769/2404670) for Chrome & Firefox — Muhammed Abdelfattah, Oct 02 '19 at 19:02

dwjohnston · Answer 1 · 2020-10-06T11:19:50.940

137

F8 will pause debugging.

On Mac, you may need to have the 'Sources' tab of the developer tools open.

Mouse over the tooltip, and press F8 while it is displayed.

You can now use the inspector to look at the CSS.

edited Oct 06 '20 at 11:19

answered Jul 29 '16 at 03:38

dwjohnston

7,389
20
81
147

9

I like how in Stackoverflow, as long as you keep scrolling down you'll find that really good answer that is far and beyond better than the rest. This is simple and easy without extra scripts. – Alexander Dixon Jan 06 '17 at 20:06
3

F8 didn't work for me for some reason, but pause is also bound to ctrl-\ – Bryan Larsen Mar 03 '17 at 13:16
Best solution here – NiallMitch14 Oct 30 '19 at 10:00
Neither F8 nor AltGr-RCtrl-ß on my German keyboard layout pauses the debugger. – testing Feb 17 '20 at 08:49
It isn't just Mac where you may need to give the focus to the Sources tab. I made the original edit because this affected the running of code in Electron. I suspect this focus is needed anytime you have any source files open at all in that tab. – Paul F. Wood Oct 11 '20 at 12:57
Note that this doesn't work if focus is on the Inspect Element find search box (among other things) when you hit F8 – philipnye Nov 20 '20 at 09:45
This is a life saver – Amit Sharma May 06 '21 at 11:28

score 93 · Accepted Answer · edited Jul 16 '13 at 12:18

93

I actually found a trick to do that with the Twitter Bootstrap tooltips. If you open the dev tools (F12) on another monitor, then hover over the element to bring up the tooltip, right click as if you were to select 'Inspect Element'. Leaving that context menu open, move the focus over to the dev tools. The html for the tooltip should show up next to the element its a tooltip for in the HTML. Then you can look at it as if it were another element. If you go back to Chrome the HTML disappears so just something to be aware of.

Kind of a weird way but it worked for me so I figured I would share it.

edited Jul 16 '13 at 12:18

mikemaccana

81,787
73
317
396

answered Mar 12 '13 at 20:05

Justin Chmura

1,761
14
17

14

Well yes, but not on Mac. – actimel Jan 27 '15 at 08:48
2

- Step 1: Inspect element that generates the tooltip to bring up the Chrome Dev tools. - Step 2: while hovering over the element, your tooltip will appear. Without leaving the element, open a new window (Command-N on Mac, Ctrl-N elsewhere) - Step 3: Drag the new window below the old window, so you can still see the tooltip, then move your cursor into the Element inspector. - Step 4: Scroll to the bottom, where your tooltip is appended to the DOM. Click the element to see its styling. – pgblu Jun 10 '15 at 20:49
2

P.S. this does not work for tooltips which are generated via Javascript from the element's own title attribute, as for example happens on SO. Those tooltips use a default styling. – pgblu Jun 10 '15 at 21:03
This helped me for tooltips in Kendo – k29 Dec 13 '18 at 14:11
Used successfully with Bootstrap 3 – lrkwz Feb 27 '19 at 10:31
Mozilla Firefox seems to allow inspecting the tooltip by default – dev27 Mar 04 '20 at 17:00
4

The trick: First go to source tab. Then you can pause Javascript with F8 button. The pause key is there with shortcut of F8 / Ctrl+\ (The answer from @Rajan on this page) – rostamiani Apr 29 '20 at 04:25

joeyyang · Answer 3 · 2016-05-05T21:44:52.363

85

This solution works without any extra code.

Hit command-option-j to open the console. Click the window-looking button on the top right corner of the console to open the console in a different window.

Then, in the Chrome window, hover over the element that triggers the popover, hit command-` however many times you need to focus on the console, then type debugger. That'll freeze the page, then you can inspect the element in the Elements tab.

edited May 05 '16 at 21:44

answered Aug 06 '14 at 17:54

joeyyang

1,054
7
9

6

This answer is really nice. Minimal code, no jQuery or dual monitor setup. – uKolka Oct 20 '14 at 20:16
1

It worked! Initially due to some misconfiguration, I was seeing the default HTML tooltips and not the Bootstrap tooltips. After fixing that issue, your solution worked. Thanks. – DFB Aug 30 '15 at 05:17
2

Additionally if you loose focus while writing `debugger` to console, you can press `alt+tab` while hovering over the element. It worked for Chromium apps on Windows. – Orcun Feb 07 '19 at 11:29
1

This was a great answer! – Nobita Mar 07 '19 at 10:05
Chrome DevTools Keyboard Shortcuts page says it is a control+` instead of command+` to focus back on the console. Maybe it changed. – rinat.io Oct 18 '19 at 14:23
How to run the debugger again after pausing? – testing Feb 17 '20 at 09:03
yes! opening the tools in flyout window (not a sub-window of the main browser) allowed me to achieve this! – samneric May 02 '20 at 17:56

Adam Grant · Answer 4 · 2017-12-19T18:43:58.790

64

You would just need to force the tooltip to show as such

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

Now the tooltip will show regardless of hovering state.

Scroll down near the bottom of the DOM where you should see the markup.

Update see cneuro's comment for Bootstrap 3.

$('.myelement').tooltip('show');

Update see Marko Grešak's answer for Chrome and apparently Safari as well, $0 can be used as a shortcut for the currently selected element. This appears to work in Safari as well.

$($0).tooltip('show')

edited Dec 19 '17 at 18:43

answered Oct 30 '13 at 14:53

Adam Grant

10,123
9
51
65

1

$('.myelement').tooltip('open') is what worked for me. – tekumara Oct 27 '14 at 13:20
7

As of Bootstrap 3, this is now `.tooltip('show')` http://getbootstrap.com/javascript/#tooltips-methods – cneuro Apr 26 '15 at 16:36
3

In Chrome, the currently selected element can be accessed as `$0` in the console. Therefore you can select the element which triggers a tooltip and run `$($0).tooltip('show')`. – Marko Gresak Mar 16 '17 at 01:21

Ali Kleit · Answer 5 · 2019-09-28T05:52:02.670

36

Click f12 go to the console tab and add the following:

setTimeout(()=> {debugger},5000)

This will give you 5 seconds to do whatever you want and it will break at 5 seconds. Then you can inspect the target element

(ex. hover the element and wait 5 seconds then inspect..)

edited Sep 28 '19 at 05:52

answered Aug 15 '19 at 11:31

Ali Kleit

1,677
2
15
26

1

Works in Electron, too. – xmedeko Oct 15 '19 at 08:51
1

Thanks, this was the only solution that worked for me on Mac Chrome (Bootstrap 4) – Franz May 11 '21 at 23:20

mikemaccana · Answer 6 · 2020-07-13T10:49:07.320

28

For me, the accepted answer didn't work: clicking in DevTools immediately closed the ToolTip.

However, I found https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution which helped me:

In the console:, Run:

    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });

Highlight element with inspector
Hit F12

You can now inspect the element, with JavaScript paused so the DOM won't change.

edited Jul 13 '20 at 10:49

answered Jul 16 '13 at 12:47

mikemaccana

81,787
73
317
396

1

Clever ! Exactly what I was looking for. Thank you :) Although it did not work with F12 with my setup for some reason, so I used keyCode == 13 and pressed ENTER. – Jeremy F. Feb 01 '16 at 16:30
2

great solution! i would suggest to save this useful snippet in the SOURCE -> SNIPPETS area of chrome so you can execute it with just a double click ;) – Magico Jun 01 '16 at 22:19
1

Great solution. Very clever. – Charlie Dalsass Dec 03 '18 at 21:44

score 16 · Answer 7 · answered May 21 '19 at 12:49

Single window answer, with no coding

None of the other answers are quite right, or have enough detail, so here's my attempt.

Open Chrome's DevTools using F12/Ctrl+Shift+I (Windows/Linux) or Command+Option+I (Mac).
Select the Sources tab in the DevTools window.
Using the mouse, hover over the element you want to inspect, to make the tooltip visible.
Press F8 (Windows/Linux/Mac) to pause script execution. The main window will grey out, and a "Paused in debugger" popup will appear.
In the DevTools window, select the Elements tab
For Bootstrap tooltips, the tooltip will appear as the last <div> in the <body>

the point is when you do F8, you need to be in Sources tab. other tab didn't work for me — Anush Shrestha, Mar 18 '21 at 03:02

score 5 · Answer 8 · answered Jul 03 '18 at 17:33

No code solution for JS activated tooltips:

With Chrome's devtools inspect the containing / parent element of the tooltip. In the "elements" tab, right click on that container DOM element then choose "break on" > "subtree modifications". The next time you hover over the part of the DOM the tooltip is housed in, the JS code will be paused allowing you to inspect the contents of the tooltip.

score 5 · Answer 9 · edited Sep 19 '19 at 11:00

5

Follow these steps

Open Inspect window in chrome.
Place the mouse over the tooltip.
Press F8

JS execution will be paused and then you can inspect the tooltip.
Press F8 again to start execution and F10 to debug.

edited Sep 19 '19 at 11:00

RobC

16,905
14
51
62

answered Sep 19 '19 at 10:39

Parvez Ahmed

59
1
1

score 4 · Answer 10 · edited Jun 20 '20 at 09:12

it is so simple to edit these tooltips.

Step 1: Inspect the element that has the tooltip. Make sure it is highlighted with blue in devtools.

Step 2: right-click on the element (in devtools part) and select: attribute modifications, under Break on

Step 3: Hover over the inspected element and a gray overlay will appear over the site with a small text: Paused in debugger

at the top of your screen

Step 4: Click on the blue arrow until the hover state is selected.

Step 5: Inspect and edit the tooltip

Rajan · Answer 11 · 2019-03-11T07:38:13.013

3

1)Open the Inspect window by clicking F12

2)Go to source tab(next to console)

3)Now hover on element to be inspected and keep your mouse over there.

4)Using keyboard(Tab or shift+tab) to move the control to pause button or F8Refer the image

5)When keyboard focus is on Play button. Hit enter. Your hover element will be freezed you can do anything now

edited Mar 11 '19 at 07:38

answered Mar 11 '19 at 07:10

Rajan

23
8

lxg · Answer 12 · 2015-11-28T12:05:10.463

2

Here’s a simple solution: If you have dynamic tooltips, you can make them “persistent” by (temporarily) changing the trigger event to click. This will have the effect that the tooltip only disappears on a click-out:

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

This way, it can be easily inspected with FF’s or Chrome’s debugging tools.

edited Nov 28 '15 at 12:05

answered Nov 28 '15 at 11:17

lxg

10,238
11
37
60

savchenkoto · Answer 13 · 2020-08-20T12:07:01.493

2

Here is how I did it on Mac:

Hover over the element that has a tooltip with chrome devtools opened.
Wait for the tooltip to appear.
Open devtools command palette with a keyboard shortcut. Cmd+Shift+P worked for me.
Type in Disable JavaScript and press Enter

This will prevent from fading all the tooltips that utilize JavaScript.

edited Aug 20 '20 at 12:07

answered Aug 20 '20 at 11:54

savchenkoto

151
1
10

score 2 · Answer 14 · answered Feb 03 '21 at 17:47

2

Hover over the element, press F8 for little longer, it will pause script execution.

answered Feb 03 '21 at 17:47

sandeep

21
1

A little more detail perhaps? – 10 Rep Feb 03 '21 at 22:28

score 1 · Answer 15 · answered Aug 19 '19 at 14:09

The dev tools provides a way to inspect a hovered element like a tooltip.

1 - Open the dev tools using F12.

2 - Select "Elements" tab.

3 - Select the parent element that contains the tooltip.

4 - Click on "..." (on the line of the parent element) and after select "Break on"/"subtree modifications" (see image below)

5 - Finally go back to application and make the Tooltip shows up. It should block the execution after the Tooltip gets visible

Hope it can be useful for someone!

score 0 · Answer 16 · answered Oct 01 '15 at 01:23

0

I had problems with this so I went to the documentation and inspected the tooltip that is already rendered on the page. That helped me see the dom structure of the tooltip and edit it accordingly.

answered Oct 01 '15 at 01:23

philip

206
1
10

score 0 · Answer 17 · answered Feb 07 '17 at 15:12

In Chome on Linux this can be achieved for JS generated tooltips such as those for references on WikiPedia by doing the following:

As stated above, open the dev tools using F12. Open them in another window. Highlight the tooltip and click Ctrl-Shift-C (The HTML Inspector). As you move over the tip, the dev window will show the appropriate section.

If you need to keep the tip open when you mouse off it, to be able to inspect it in the other window more thoroughly, then right click on the tooltip and leave the context menu up, and click on the the dev tools window. In this scenario it leaves the tip up in the wikipedia window.

To a degree it also works with bootstrap tips.

score 0 · Answer 18 · answered Aug 03 '17 at 18:35

For some reason the answers provided here weren't working for me on Windows. I was able to inspect the tooltip by opening the dev tools, then hovering over the element that brings up the tooltip, then right clicking on that element (not the tooltip). Then, move the cursor over into the inspector panel and scroll down to the bottom. The tooltip element should still be there.

score 0 · Answer 19 · answered May 22 '20 at 05:18

0

Another Solution I found for this problem. Through Mobile or Tablet view in Chrome press Crt + Shift + M in Chrome Dev tools for Mobile view in Chrome. Click(Tap) on ToolTip div and you can inspect it with Right Click on tooltip

answered May 22 '20 at 05:18

HERAwais

159
4
16

score 0 · Answer 20 · edited Jun 01 '20 at 10:03

Hit command-option-j to open the console. Click the window-looking button on the top right corner of the console to open the console in a different window.

Then, in the Chrome window, hover over the element that triggers the popover, hit command- however many times you need to focus on the console, then type debugger. That'll freeze the page; then you can inspect the element in the Elements tab.

score 0 · Answer 21 · answered Mar 04 '21 at 07:51

0

just hit one line script in console and press any key to enter in debug mode.

window.onkeydown = () => { debugger }

answered Mar 04 '21 at 07:51

Shabbir Vaghela

76
7

score 0 · Answer 22 · edited May 10 '21 at 04:20

0

appear the hovered item by over mouse
windows --> Ctrl + shift + c || Mac --> Command + Option + C

edited May 10 '21 at 04:20

Adrian Mole

30,672
69
32
52

answered May 10 '21 at 04:14

Gayan Chinthaka

107
2

score -1 · Answer 23 · answered Jan 20 '17 at 15:32

Worth noting that toggling the :hover state from within the dev tools only has an impact if the hint text is enabled via CSS :hover rules in the first place. The toggle only applies the hover state to the element for rendering purposes, but does not trigger a corresponding JavaScript mouseover event.

Many frameworks such as AngularJS dynamically attach tooltip HTML to the bottom of the document body via JavaScript when a target element is hovered, so any amount of hovering and inspecting the target element won't help.

@joeyyang's answer worked very well for me in this scenario.

score -2 · Answer 24 · answered Oct 25 '19 at 07:43

-2

One of the easiest ways I found is:

Open Chrome dev tools on the side
Hover over element
Right-click
Click on dev tools
Now you can inspect and change styles

answered Oct 25 '19 at 07:43

Kaspars Siricenko

7
3

This is not helpful @Kaspars – Es Noguera Jan 03 '20 at 17:47
@EsNoguera could be more specific why. This ist the way it worked for me. Since I found method that worked why it's bad to be suggested? – Kaspars Siricenko Jan 13 '20 at 11:38

Inspect hovered element in Chrome?

24 Answers24

Linked