如何纯CSS实现绝对定位tooltip宽度自适应文本内容

完全可以仅用CSS实现，不需要任何JavaScript。

问题根源 #

绝对定位元素的百分比宽度，是相对于最近的开启了定位的祖先元素计算的。当前代码给.tooltiptext设置了width: 100%，它的宽度就会完全等于父元素.tooltip的宽度，文本只能在这个宽度范围内折行，没法根据自身长度撑开容器。

修改方法 #

不需要改HTML结构，只需要调整.tooltiptext的几个CSS属性：

• 删掉原有的width: 100%，解除宽度和父元素的绑定
• 加width: max-content，让元素宽度优先适配内容长度，短文本下不会主动折行、不会留多余空白
• 加max-width做宽度上限，避免长文本直接撑出屏幕范围，超过上限宽度后文本才会自动折行
• 把原来的padding: 5px 0改成带左右内边距的值，避免文字直接贴在提示框边缘

完整可用代码 #

CSS部分 #

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;   
  /* 替换原有width: 100% */
  width: max-content;
  max-width: min(90vw, 320px); /* 最大宽度可按需调整，这里设为最宽320px，且不超过视口宽度的90% */
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 6px 12px; /* 增加左右内边距避免文字贴边 */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

HTML部分（原代码无需改动） #

<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">
  <div> Hover me </div> 
    <div class="tooltiptext">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  </div>
</div>

兼容说明 #

这个方案在所有现代浏览器（Chrome、Firefox、Edge、Safari）都能正常运行。如果需要兼容IE11这类不支持max-content的老旧浏览器，可以把width: max-content替换成white-space: nowrap，但要注意这种写法下文本默认不会折行，必须配合max-width和word-break规则处理长文本溢出场景。

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