Inspect hovered element in Chrome?

html css hover google-chrome-devtools
Skitterm picture Skitterm · Mar 12, 2013 · Viewed 67.6k times · Source

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?

Answer

dwjohnston picture dwjohnston · Jul 29, 2016

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.

Related questions

Changing image on hover with CSS/HTML

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm …

Read More
How to affect other elements when one element is hovered

What I want to do is when a certain div is hovered, it'd affect the properties of another div. For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that …

Read More
How to show text on image when hovering?

I'm trying to show a description when hovering over an image. I've already done it in a less than desirable way, using image sprites and hovers here: I want it to look exactly like how I have it, but using …

Read More