纯CSS实现带箭头的Tooltip提示框

当然可以！咱们完全能靠另一个伪元素::after实现这个指向箭头，不需要额外加任何HTML元素。核心思路就是利用CSS边框的特性——把元素宽高设为0，只给某几个方向设置边框，就能生成三角形，这就是箭头的由来。

修改后的完整CSS代码 #

span { 
  padding: 10px; 
  display: inline; 
} 

[title]:hover::before { 
  background: rgba(0,0,0,.8); 
  border-radius: 5px; 
  color: #fff; 
  content: attr(title); 
  padding: 5px 15px; 
  position: absolute; 
  z-index: 98; 
  width: auto; 
  top: 20%; /* 保留你原有的定位设置 */
}

/* 新增的箭头伪元素样式 */
[title]:hover::after {
  content: '';
  position: absolute;
  z-index: 99; /* 比tooltip的层级高一点，避免被遮挡 */
  top: calc(20% + 25px); /* 根据tooltip的高度调整位置，这里是预估高度，可按需微调 */
  left: 10px; /* 调整箭头的水平位置 */
  /* 用边框生成三角形箭头 */
  border: 8px solid transparent;
  border-top-color: rgba(0,0,0,.8); /* 和tooltip背景色保持一致 */
}

关键细节说明 #

• 箭头用::after伪元素生成，通过透明边框+单一方向有色边框的组合创造三角形效果，边框宽度决定箭头大小。
• 定位要和::before的tooltip联动：比如top值用calc(20% + 25px)，其中25px是tooltip的大致高度，你可以根据实际显示效果调整数值。
• 如果想让箭头指向按钮中心，可把left改成50%，再加上transform: translateX(-50%)实现水平居中。

完整HTML代码（和你提供的一致） #

<span class="dijitButtonContents" id="saveButton" title="Save as draft">
  <span id="saveButton_label">Save</span>
</span>

你可以根据需求调整箭头的大小、位置和颜色，完全适配你的tooltip样式~

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