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\", not

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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!

Answer 6

Follow these steps

1. Open Inspect window in chrome.

2. Place the mouse over the tooltip.

3. Press F8

   JS execution will be paused and then you can inspect the tooltip.

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