鼠标悬停时隐藏原生title提示框，仅保留自定义提示

你遇到的问题根源在于：原生title属性会触发浏览器默认的黑色背景提示框，同时你基于title属性用CSS做了自定义提示，导致两者同时显示。如果直接移除或用JS清空title，CSS里的attr(title)会失去内容，自定义提示也会跟着失效。

最简单的解决办法是替换原生title属性为自定义数据属性，比如data-tooltip——这样既不会触发原生提示，又能让CSS正常读取内容生成自定义提示：

步骤1：修改HTML中的属性 #

把所有<li>标签的title替换成data-tooltip：

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
  />
</head>
<body>
  <header>
    <ul class="nav-buttons">
      <li data-tooltip="Homepage">
        <a id="navhomepage" href="./index.html" class="nav-button">
          <span class="material-symbols-outlined">
            home
          </span>
        </a>
      </li>
      <li data-tooltip="Photopage">
        <a id="navphotopage" href="./Photosite/index.html" class="nav-button">
          <span class="material-symbols-outlined">
            photo_camera
          </span>
        </a>
      </li>
      <li data-tooltip="Startside">
        <a id="navstartside" href="./Startside/index.html" class="nav-button">
          <span class="material-symbols-outlined">
            web
          </span>
        </a>
      </li>
      <li data-tooltip="Contact">
        <a id="navcontact" href="#Contact" class="nav-button">
          <span class="material-symbols-outlined">
            contact_page
          </span>
        </a>
      </li>
    </ul>
  </header>
</body>

步骤2：修改CSS选择器和属性读取 #

把CSS中依赖title的部分改成data-tooltip，同时修正错误的background-color写法：

header {
  background-color: #195190;
  color: #fff;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.nav-buttons {
  display: flex;
  gap: 30px;
  justify-content: flex-end;
  animation: slideInL 1s ease-in-out;
}

.nav-button {
  background-color: transparent;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.nav-button:hover {
  color: #ccc;
}

li {
  list-style-type: none;
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

/* 修改选择器和attr内容，同时修正background-color值 */
li[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  background-color: transparent;
  color: #fff;
  text-align: center;
  padding: 5px 0;
}

修改后，浏览器不会触发原生的黑色提示框，只会显示你自定义的白色文本提示，完美解决问题。

内容的提问来源于stack exchange，提问作者Ant