如何为单词添加鼠标悬停显示对应解释的弹窗，兼容原有交互逻辑

你现有逻辑完全不用改动，只需要做少量标签/样式补充就能实现需求，下面给两种可直接落地的实现方式：

方案1：原生title属性实现（最快落地，零额外JS/CSS） #

直接给每个单词的<font>标签加title属性，属性值填对应单词的解释即可，浏览器会在鼠标悬停时自动弹出原生提示框，完全不影响你已有的悬停变色、点击播放音频功能。
修改后的示例代码：

<script>
   function playAudio(url) {
   new Audio(url).play();
 }
</script>

<p>
<font size="6" style="font-weight:bold;" 
  title="first-word 对应解释：第一个单词"
  onmouseover="this.style.color='red';" 
  onmouseout="this.style.color='black';" 
  onclick="playAudio('audio-1.mp3')">first-word</font>
        
<font size="6" style="font-weight:bold;" 
  title="second-word 对应解释：第二个单词"
  onmouseover="this.style.color='red';" 
  onmouseout="this.style.color='black';" 
  onclick="playAudio('audio-2.mp3')">second-word</font>
                
<font size="6" style="font-weight:bold;" 
  title="third-word 对应解释：第三个单词"
  onmouseover="this.style.color='red';" 
  onmouseout="this.style.color='black';" 
  onclick="playAudio('audio-3.mp3')">third-word</font>
</p>

• 优点：代码改动量极小，兼容所有浏览器
• 缺点：弹窗样式是浏览器默认的，无法自定义外观、弹出延迟

方案2：自定义CSS弹窗（样式可自定义，体验更好） #

如果需要自定义弹窗样式，不需要改动现有JS逻辑，只需要加一段全局CSS，再给每个单词标签内部加一个隐藏的提示元素即可。
完整实现代码：

<style>
/* 单词容器设为相对定位，给弹窗做定位参照 */
.word-item {
  position: relative;
  cursor: pointer;
}
/* 悬停时显示弹窗 */
.word-item:hover .word-tip {
  display: block;
}
/* 弹窗基础样式 */
.word-tip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: normal;
  white-space: nowrap;
  z-index: 999;
}
/* 弹窗小三角指示器 */
.word-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
}
</style>

<script>
   function playAudio(url) {
   new Audio(url).play();
 }
</script>

<p>
<font class="word-item" size="6" style="font-weight:bold;" 
  onmouseover="this.style.color='red';" 
  onmouseout="this.style.color='black';" 
  onclick="playAudio('audio-1.mp3')">
  first-word
  <span class="word-tip">first-word 对应解释：第一个单词</span>
</font>
        
<font class="word-item" size="6" style="font-weight:bold;" 
  onmouseover="this.style.color='red';" 
  onmouseout="this.style.color='black';" 
  onclick="playAudio('audio-2.mp3')">
  second-word
  <span class="word-tip">second-word 对应解释：第二个单词</span>
</font>
                
<font class="word-item" size="6" style="font-weight:bold;" 
  onmouseover="this.style.color='red';" 
  onmouseout="this.style.color='black';" 
  onclick="playAudio('audio-3.mp3')">
  third-word
  <span class="word-tip">third-word 对应解释：第三个单词</span>
</font>
</p>

• 优点：弹窗样式、位置、弹出效果完全可控，没有原生title的延迟问题
• 注意：批量新增单词时，只需要给标签加class="word-item"，内部嵌套对应解释的<span class="word-tip">即可，原有悬停变色、点击播音频的逻辑完全不需要修改。

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