如何让CSS Tooltip仅高亮单个单词而非整段文本？

嘿，这个问题其实很好解决！你当前的问题根源是把.tooltip类直接应用在了整个段落上，所以hover时整段文本都会被高亮触发tooltip。要实现只高亮over这个单词，只需要调整HTML结构，把目标单词单独用带.tooltip类的标签包裹起来就行，CSS部分基本不用改动~

修改后的完整代码示例： #

HTML部分：

<body>
  <p>This is some text <span class="tooltip">over<span class="tooltiptext">这里是Tooltip提示内容</span></span> which we want a tooltip</p>
</body>

CSS部分（保留你原来的样式即可）：

body {text-align: center}
.tooltip { 
  position: relative; 
  display: inline-block; 
  border-bottom: 1px dotted black; 
}
.tooltip .tooltiptext { 
  visibility: hidden; 
  width: 120px; 
  background-color: black; 
  color: #fff; 
  text-align: center; 
  border-radius: 6px; 
  padding: 5px 0; 
  /* Position the tooltip */ 
  position: absolute; 
  z-index: 1; 
  bottom: 100%; 
  left: 50%; 
  margin-left: -60px; 
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

原理说明： #

• 原来的.tooltip类设置了display: inline-block，当它只包裹单个单词时，只会对这个单词生效，加上下划线样式；
• hover动作也只会触发在这个单词上，tooltip提示也只会和这个单词关联，不会影响到整段其他文本。

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