纯CSS实现Tooltip时超出容器/屏幕的问题解决求助

问题场景：实现纯CSS Tooltip时，当带Tooltip的文本处于页面最左/右侧，Tooltip会超出屏幕范围无法完整显示，且必须设置body { overflow-x: hidden; }。

修改后的CSS代码 #

[data-ToolTip] {
  position: relative;
}

[data-ToolTip]:before {
  content: '';
  display: none;
  border: 5px solid #000;
  border-top-color: #000;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  position: absolute;
  top: -7px;
  /* 箭头跟随Tooltip居中 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

[data-ToolTip]:after {
  display: none;
  content: attr(data-ToolTip);
  position: absolute;
  top: -35px;
  /* 让Tooltip相对于触发元素居中 */
  left: 50%;
  transform: translateX(-50%);
  /* 限制最大宽度，避免超长内容撑出屏幕 */
  max-width: 200px;
  padding: 0 8px;
  background: #000;
  color: #fff;
  z-index: 9;
  font-size: 13px;
  height: auto;
  line-height: 28px;
  /* 允许换行，避免单行过长 */
  white-space: normal;
  word-wrap: break-word;
}

[data-ToolTip]:hover:before,
[data-ToolTip]:hover:after {
  display: block;
}

核心修改说明 #

• 居中定位：将Tooltip的left设为50%，配合transform: translateX(-50%)，让Tooltip始终相对于触发元素居中，避免靠近屏幕边缘时直接出界。
• 宽度与换行控制：添加max-width并设置white-space: normal，防止超长Tooltip内容撑破屏幕，同时允许内容自动换行；将height设为auto适配多行内容。
• 箭头同步居中：调整箭头的left和transform属性，让它始终对准Tooltip的底部中心，保持视觉一致性。

测试HTML代码 #

<p style="text-align: right;"><span data-ToolTip="Version Control System">VCS</span></p>
<p style="text-align: left;"><span data-ToolTip="这是一个很长的Tooltip测试内容，用来验证换行和宽度限制是否生效">左侧测试</span></p>

上述修改已经能解决绝大多数场景下的出界问题，同时满足overflow-x: hidden的要求。如果需要更极致的边界适配，还可以结合CSS的clamp()函数微调位置，但基础方案足以覆盖常规需求。

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