Disable detailed tooltips in Inspect Mode for Google Chrome Dev Tools
I spend 3/4 of my life on Google Chrome DevTools. In the latest release of Google Chrome Dev tools someone had the great idea to push upstream an intrusive tooltip that pops up when you inspect HTML elements on mouse hover.
Google describes the change this way:
When inspecting a node, DevTools now shows an expanded tooltip containing commonly important information like font size, font color, contrast ratio, and box model dimensions.
I really don’t think fontsize as important information, in fact I find this “too much”. These simple CSS attributes are probably not the ones that I am worried about in my development journey of pixel perfect, lightweight and reactive web pages (sarcasm). In fact that’s probably the least important information I need when I dissect through html elements in the node tree.
How to prevent this detailed tooltips from appearing?
There’s no way to disable the pop up from showing permanently, however I found out that simply holding your CTRL
(or CMD
or equivalent key) on you keyboard while moving your pointer over the web-page will disable the pop up from showing up.
Why fix it if it isn’t broken?
All this information is repeated in Dev tools panels quickly below. Why the need for a tooltip that pops up? If you’re interested in scoping out the attributes of a certain element just look in the panes below.
Is this the best way to disable the tooltip? Probably not. However this will have to do, for now.
I do find this addition to Dev Tools annoying, then again I am a developer and I like to complain.