如何将HTML提示框（tooltip）效果仅作用于单个单词？

问题背景 #

现有以下HTML代码：

<h6><u>TIP</u>: Hover over underlined words for more info</h6>
<p title="A delicious bread based food with tomato sauce, served open with melted cheese and other toppings optional"><u>Pizza</u> was used to ensure that the everyone was satisfied during Sprint planning, even if they weren't satisfied with the plan itself :-)</p>

当前title属性给整个段落添加了提示框效果，需求是仅让带下划线的“Pizza”单词触发提示框。

你已尝试的操作：

• 将span标签置于title属性之前和单词“Pizza”之后（包含下划线标签）
• 尝试用链接嵌套span实现提示：<a href="#">Text <span>Tooltip</span></a>
• 使用反向编辑器调试
• 引入CSS代码：.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; }
• 搜索相关问题但未找到合适答案

解决方案 #

方法1：原生HTML实现（最简单） #

直接把title属性从<p>标签转移到包裹“Pizza”的<u>标签上即可，无需额外代码：

<h6><u>TIP</u>: Hover over underlined words for more info</h6>
<p><u title="A delicious bread based food with tomato sauce, served open with melted cheese and other toppings optional">Pizza</u> was used to ensure that everyone was satisfied during Sprint planning, even if they weren't satisfied with the plan itself :-)</p>

这样只有鼠标悬停在“Pizza”上时才会显示系统原生提示框，完全满足需求。

方法2：自定义样式提示框（可选，更美观） #

如果觉得原生提示框样式不够灵活，可以用CSS自定义提示框，步骤如下：

1. 用span包裹目标单词，添加类名用于样式控制
2. 嵌套一个子span存放提示内容
3. 用CSS设置提示框的显示逻辑和样式

代码示例：

<h6><u>TIP</u>: Hover over underlined words for more info</h6>
<p>
  <span class="custom-tooltip">
    <u>Pizza</u>
    <span class="tooltip-text">A delicious bread based food with tomato sauce, served open with melted cheese and other toppings optional</span>
  </span>
  was used to ensure that everyone was satisfied during Sprint planning, even if they weren't satisfied with the plan itself :-)
</p>

<style>
/* 父容器设置相对定位，用于提示框的绝对定位参考 */
.custom-tooltip {
  position: relative;
  display: inline-block;
}

/* 自定义提示框的基础样式 */
.custom-tooltip .tooltip-text {
  visibility: hidden;
  width: 220px;
  background-color: #2d2d2d;
  color: #fff;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  padding: 6px 8px;
  position: absolute;
  z-index: 1;
  bottom: 130%; /* 提示框在目标单词上方显示 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* 鼠标悬停时显示提示框 */
.custom-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
</style>

对之前尝试操作的说明 #

• 你之前把span放在title前的方式不对，title属性需要直接添加到目标元素（这里是<u>）上才能生效
• 用<a>标签的方法属于自定义提示框的一种，但没必要用链接标签，普通span更合适
• 你引入的CSS是自定义提示框的基础样式，但缺少对应的HTML结构（嵌套的提示内容元素），所以没有生效

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