【HTML】基础工具提示 | 使用title属性在悬停时显示提示

本教程介绍如何使用HTML的title属性显示简单的工具提示，并介绍如何使用CSS和JavaScript创建自定义工具提示。

🔹 基本代码

<p>将鼠标悬停在<span title="更多信息">此部分</span>上查看工具提示。</p>

💻 完整的工作代码（直接复制并粘贴以测试）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>工具提示示例</title>
  <style>
    body {
      font-family: 'Segoe UI', Meiryo, sans-serif;
      padding: 20px;
      text-align: center;
      line-height: 1.6;
    }
    .tooltip-demo {
      color: #1e88e5;
      font-weight: bold;
      cursor: help;
      border-bottom: 1px dashed #1e88e5;
      padding-bottom: 1px;
    }
    .tooltip-demo:hover {
      color: #0d47a1;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>工具提示示例</h2>
    <p>将鼠标悬停在<span class="tooltip-demo" title="工具提示正在显示！更多说明文本出现在这里。">蓝色文本</span>上查看工具提示。</p>
    <p>此示例演示了使用HTML的title属性的默认工具提示行为。</p>
  </div>
</body>
</html>

🧩 工具提示的基本特点

使用title属性的工具提示是浏览器的标准功能，可以在没有JavaScript的情况下实现。它们在将鼠标悬停在元素上约1秒后显示，当鼠标移开或点击时消失。

它的优点是支持所有主要浏览器，并且屏幕阅读器可以读取，具有很好的可访问性。不过，无法自定义设计。

🎯 创建自定义工具提示

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>

<div class="tooltip">将鼠标悬停在我身上
  <span class="tooltiptext">自定义工具提示</span>
</div>

您可以仅使用CSS和HTML创建自定义工具提示。该方法允许更高的设计灵活性，并且可以添加动画效果。但是，没有JavaScript的情况下，动态位置调整会受到限制。

📚 实践使用示例

表单输入提示：<label>密码: <input type="password">?</label>

术语解释：HTML 是一种用于创建网页的语言。

这些示例显示了如何有效使用工具提示来提高用户界面的可用性。

⚠️ 重要提示：工具提示与链接的区别

纯工具提示功能

本文介绍的方法是纯工具提示功能，没有链接功能。：

点击不会跳转到页面
仅用于在悬停时显示信息
视觉样式（如颜色变化）通过CSS完成

<!-- 没有链接功能 -->
<span class="tooltip" title="说明">悬停目标</span>

<!-- 有链接功能的工具提示 -->
<a href="page.html" title="说明">可点击的链接</a>

将工具提示与链接组合

要创建带有工具提示的链接，只需将title属性添加到<a>标签：

<a href="#" class="tooltip-link" title="您将被重定向到详细页面">
  可点击链接
</a>

<style>
.tooltip-link {
  color: #0066cc;
  text-decoration: underline;
}
</style>

已复制！