Best IT Recipes

Check inline element in Chrome?

I’m trying to see through the Chrome developer tools how tooltips are structured on a site. However, even when I hover over an element, when I "test the element", nothing shows for a tooltip in html. I know that I can set the style :hover , but I still don't see the html or css tooltip.

Any ideas?

+82
html css google-chrome-devtools hover
Mar 12 '13 at 19:53
source share
16 answers

I really found a trick to do this with Twitter Bootstrap tips. If you open the developer tools (F12) on another monitor, then hover over an item to open a tooltip by right-clicking, as if you should select Inspect Item. Leaving this context menu open, move the focus to dev tools. In html for the tooltip, its tooltip for HTML should appear next to the element. Then you can look at it as another element. If you return to Chrome, HTML will disappear, just something you need to know about.

Some strange way, but it worked for me, so I decided to share it.

+66
Mar 12 '13 at 20:05
source share

This solution works without additional code.

Press command-option-j to open the console. Click the window button in the upper right corner of the console to open the console in another window.

Then, in the Chrome window, hover over the element that launches popover, press command-` , but many times you need to focus on the console, then enter debugger . This will freeze the page, after which you can check the item on the "Elements" tab.

+68
Aug 06
source share

You just need to get the tooltip to show as such

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

Now the tooltip will show regardless of the state of freezing.

Scroll down to the bottom of the DOM where you will see the markup.

Update see cneuro comment for Bootstrap 3.

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

Refresh see Marco Greshak's comment for Chrome and, apparently, Safari, $0 can be used as a shortcut for the currently selected item. This also works in Safari.

 $($0).tooltip('show')
+62
30 Oct '13 at 14:53
source share

F8 pauses debugging.

Hover over the tooltip and press F8 while it is displayed.

Now you can use inspectors to view CSS.

+58
Jul 29 '16 at 3:38 on
source share

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

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

  • In the console :, Run: window.addEventListener('keydown', function(e) { if (e.keyCode == 123) debugger; });

  • Select an item with an inspector.

  • Hit F12

Now you can check the element when JavaScript is paused, so the DOM will not change.

+21
Jul 16 '13 at 12:47 on
source share

Answer in one window, without encoding

None of the other answers are completely correct, or not detailed enough, so here is my attempt.

  • Open Chrome DevTools using F12 / Ctrl + Shift + i (Windows / Linux) or Command + Option + i (Mac).
  • Select the Sources tab in the DevTools window.
  • Use your mouse to hover over the item you want to check to make the tooltip visible.
  • Press F8 (Windows / Linux / Mac) to pause script execution. The main window will turn gray and a “Suspended in Debugger” pop-up will appear.
  • In the DevTools window, select the Elements tab
  • For Bootstrap tooltips, this tooltip will appear as the last <div> in the <body>
+6
May 21 '19 at 12:49
source share

There is no code for JS activated tooltips:

Use Chrome devtools to check the containing / parent tooltip. In the "elements" tab, right-click on this container DOM element and select "split into"> "subtree modifications." The next time you hover over the part of the DOM where the tooltip is located, the JS code will be paused, allowing you to check the contents of the tooltip.

+5
Jul 03 '18 at 17:33
source share

Here is a simple solution. If you have dynamic tooltips, you can make them “permanent” (temporarily) by changing the trigger event to click . This will cause the tooltip to disappear only after clicking:

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

Thus, it can be easily verified using the FF or Chromes debugging tools.

+2
Nov 28 '15 at 11:17
source share

Press 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 in 5 seconds . Then you can check the target element

(for example, hover over an item and wait 5 seconds, then inspect ..)

+1
Aug 15 '19 at 11:31 on
source share

I had problems with this, so I went to the documentation and checked the tooltip that is already displayed on the page. This helped me to see the dom tooltip structure and edit it accordingly.

0
01 Oct '15 at 1:23
source share

On Chome Linux, this can be achieved for JS tooltips, such as WikiPedia links, by doing the following:

As stated above, open dev tools using F12. Open them in another window. Highlight the tooltip and press Ctrl-Shift-C (HTML inspector). When you go over the tip, the dev window will display the corresponding section.

If you need to keep the tooltip open when you turn it off in order to check it in more detail in another window, then right-click the tooltip and leave the context menu up, and then click on the dev window tools. In this case, it leaves a hint in the wikipedia window.

To some extent, it also works with bootstrap tips.

0
Feb 07 '17 at 15:12
source share

For some reason, the answers provided here did not work for me on Windows. I was able to check the tooltip by opening the dev tools, then hovering over the item that brings up the tooltip, and then right-clicking on that item (not the tooltip). Then move the cursor to the inspector panel and scroll down. The tooltip element should still be there.

0
Aug 03 '17 at 18:35
source share

1) Open the test window by pressing F12

2) Go to the source tab (next to the console)

3) Now hover over the item you want to inspect, and hold the mouse there.

4) Using the keyboard (Tab or Shift + Tab) to move the control to the pause button or F8. See Image

5) When the keyboard focuses on the play button. Press Enter. Your hover element will be frozen, now you can do anything you want

0
Mar 11 '19 at 7:10
source share

The dev utilities provide a way to check the item that the object points to, such as tooltips.

1 - Open developer tools with F12.

2 - Select the "Elements" tab.

3 - Select the parent containing the tooltip.

4 - Click "..." (in the line of the parent element) and then select "Split into" / "Subtree changes" (see image below)

Set a Break on parent element

5 - Finally, return to the application and make a tooltip. It should block execution after the prompt becomes visible.

Hope this can be helpful for someone!

0
Aug 19 '19 at 14:09
source share

Follow these steps

  1. Open the Inspect window in Chrome.

  2. Hover over the tooltip.

  3. Press F8

    JS execution will be paused and then you will be able to view the prompt.

  4. Press F8 again to start execution, and F10 to debug.

0
Sep 19 '19 at 10:39 on
source share

It's worth noting that switching state: hover from Dev tools only has an effect if tooltip text is enabled using CSS: hover rules. The switch only applies the hover state to the element for rendering purposes, but does not raise the corresponding JavaScript mouse event.

Many frameworks, such as AngularJS, dynamically attach an HTML tooltip to the bottom of a document body through JavaScript when an element object is frozen, so any amount of freezing and checking the target element will not help.

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

-one
Jan 20 '17 at 15:32
source share


More articles:


All Articles