DevTools Tips

Hide or pin the information tooltip while inspecting page elements

Categories: Supported by:

When selecting elements from the page using the inspect tool, the hovered elements get highlighted, and an information tooltip follows your mouse around and gives you information about the hovered element.

You can hide, or pin this information tooltip in Chrome or Edge.

To hide the information tooltip

  1. Start the inspect tool by clicking Select an element in the page to inspect it (the little cursor icon in the top left corner of DevTools).
  2. Start hovering over elements in the webpage, elements get highlighted and the information tooltip appears.
  3. Hold the Ctrl key on your keyboard, the information tooltip disappears.

Chrome, with a webpage and devtools opened to the side. The inspect mode is on, the mouse is hovering an element in the webpage, which is highlighted, but the information tooltip is not displayed.

To pin the highlight and information tooltip on the current element

  1. Start the inspect tool by clicking Select an element in the page to inspect it (the little cursor icon in the top left corner of DevTools).
  2. Start hovering over elements in the webpage, elements get highlighted and the information tooltip appears.
  3. Hold the Ctrl and Alt keys on your keyboard, the highlight and information tooltip are pinned on the current element, and you can move your mouse around without losing this information.

Chrome, with a webpage and devtools opened to the side. The inspect mode is on, the mouse is hovering an element in the webpage, but another one is highlighted and has the info tooltip.