Hover tooltips in VS Code show variable info, function details, and type hints when you move your mouse over code. While useful, many developers find them distracting, especially when working with CSS, React, or WordPress projects. In this guide, you’ll learn how to disable hover tooltips globally or per language in VS Code.

Disable Hover Tooltip for All Languages (Global)

1. Open VS Code
2. Press Ctrl + Shift + P
3. Search → Preferences: Open Settings (JSON)
4. Add this:

"editor.hover.enabled": false

✅ Works for CSS, JavaScript, React, PHP, HTML, Python, etc.

---

Disable Hover Tooltip for HTML

"[html]": {
  "editor.hover.enabled": false
}

Stops tag attribute and element info popups.

---

Disable Hover Tooltip for CSS

Perfect if CSS hover popups (colors, values, units) annoy you.

"[css]": {
  "editor.hover.enabled": false
}

Also for SCSS & LESS:

"[scss]": {
  "editor.hover.enabled": false
},
"[less]": {
  "editor.hover.enabled": false
}

---

Disable Hover Tooltip for JavaScript & React

"[javascript]": {
  "editor.hover.enabled": false
},
"[javascriptreact]": {
  "editor.hover.enabled": false
}

Useful when working on React components, props, or hooks.

---

Disable Hover Tooltip for TypeScript

"[typescript]": {
  "editor.hover.enabled": false
},
"[typescriptreact]": {
  "editor.hover.enabled": false
}

---

Disable Hover Tooltip for PHP (WordPress Developers)

If you work with WordPress themes/plugins, this is very useful:

"[php]": {
  "editor.hover.enabled": false
}

---

Delay Hover Tooltip Instead of Disabling

If you want hover hints but not instantly:

"editor.hover.delay": 2000

⏱ Tooltip will appear after 2 seconds.

---

Final Thoughts

VS Code is powerful because it’s fully customizable. Disabling hover tooltips—especially for CSS, React, and PHP—can dramatically improve focus and productivity.