41

How do I hide the annoying yellow box that appears under html fields when I hover over elements in the Chrome "Developer Tools" elements panel - it's driving me nuts as I can't see the bottom of my labels etc...

See example image

Rippo
  • 22,117
  • 14
  • 78
  • 117
Rob
  • 10,004
  • 5
  • 61
  • 91
  • This is one is terribly annoying indeed – MeLight Mar 10 '11 at 11:03
  • @MeLight - yeah it sure is - it's ok most of the time but when you're trying to sort out css margins etc it can be a real pain. – Rob Mar 10 '11 at 11:14
  • You can't hide it, file a bug on http://crbug.com and get people to star it. – Kinlan May 16 '11 at 10:22
  • here's the bug report http://code.google.com/p/chromium/issues/detail?id=89510 – sprugman Jul 16 '11 at 15:18
  • Here's the new bug report: [Issue 282493: Inspector tooltip covers content (Issue 89510 was not fixed but was closed)](http://crbug.com/282493) – Daniel Trebbien Dec 21 '13 at 18:41
  • This is fixed in latest Chrome (Pressing Ctrl/Cmd when hovering elements in the console/DOM tree will inhibit the tooltip). 36.0.1978.0 (Developer Build 268656) - sweet :) https://code.google.com/p/chromium/issues/detail?id=282493#c18 – Philip Murphy Jul 24 '14 at 07:59

3 Answers3

23

From the posted bug: "https://code.google.com/p/chromium/issues/detail?id=282493". If you hold keyboard Control (Ctrl) key before hovering the element (or command on a mac) the tooltip won't show. Not the ideal solution but it works as long as you know about it

Nahid
  • 2,911
  • 1
  • 20
  • 17
Brandon
  • 1,305
  • 1
  • 12
  • 16
4

You might want to check Chrome 16 which got an improved element tooltip. Please comment on the bug and mention specific issues that you want to get fixed.

Sudarshan
  • 18,140
  • 7
  • 53
  • 61
Alexander Pavlov
  • 31,598
  • 5
  • 67
  • 93
3

You can pretty easily tweak devtools yourself. Basically, follow these instructions to get started.

Then, inside inspector.js, tweak WebInspector.highlightDOMNode, by applying this small patch.

1150,1151c1150
<     // Do not highlight the DOM node.
<     //this.highlightDOMNodeForTwoSeconds(nodeId);
---
>     this.highlightDOMNodeForTwoSeconds(nodeId);

Fore more info, check out this post on extending Chrome DevTools.

Sudarshan
  • 18,140
  • 7
  • 53
  • 61
Boris Smus
  • 8,220
  • 2
  • 36
  • 33
  • 2
    Thank you for sharing your article but it doesn't answer the question here. Can you be more specific on how to solve the problem? – nakhli Jul 21 '11 at 09:14
  • The last paragraph of it's article contain a step by step explanation on how to remove this particular problem. @boris could you copy at least a summary or the relevant part of your blog post here ? (For a debate on Meta on copying versus linking to blog answers, see http://meta.stackexchange.com/questions/20531/how-to-refer-to-your-blog-when-answering ) – Julien Roncaglia Jul 27 '11 at 12:41