纯CSS实现Tooltip定位求助：解决滚动偏移与父元素截断

问题分析 #

你需要基于CSS实现挂载在data-tooltip属性的tooltip，鼠标悬停时显示，但当前遇到两个核心问题：

• 使用fixed定位的tooltip不会随页面滚动，滚动后位置错位
• 使用absolute定位的tooltip会被设置了overflow:hidden的相对定位父元素截断
  且无法修改第三方生成的父元素样式，需要纯CSS方案。

纯CSS折中解决方案 #

由于CSS的定位规则限制，在不修改父元素样式的前提下，无法同时完美解决"不被截断"和"跟随滚动"两个需求，但可以选择缺陷更小的方案，结合以下技巧优化：

方案：优化fixed定位的tooltip #

利用fixed定位不会被父元素overflow:hidden截断的特性，同时调整位置逻辑，确保tooltip仅在元素处于视口内时显示（滚动出视口后hover状态消失，tooltip自动隐藏，避免出现持续错位的情况）。

代码示例：

/* 通用span样式 */
span{
  display: block;
  font-weight: bold;
  margin: 3px;
  padding: 10px;
  border: 1px solid blue;
  position: relative;
}

/* 父元素样式（不可修改） */
div{
  overflow: hidden;
  position: relative;
  background: #eeeeee;
}

/* 优化后的tooltip样式 */
[data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: fixed;
  /* 定位到元素上方，避免被父元素截断 */
  top: calc(100vh - (100vh - var(--scroll-y, 0)) - 1.5rem);
  left: auto;
  background: lightgray;
  border: 1px solid black;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  z-index: 9999;
}

说明 #

• 该方案利用fixed定位的特性，突破父元素overflow:hidden的截断限制
• 当元素滚动出视口后，hover状态消失，tooltip自动隐藏，不会出现持续错位的问题
• 若需要tooltip完全跟随元素滚动，纯CSS目前无法实现，必须结合JavaScript获取元素实时位置并设置CSS变量--scroll-y

替代方案（需浏览器支持:has()选择器） #

如果你的目标浏览器支持CSS :has()选择器（Chrome 105+、Safari 15.4+），可以将tooltip挂载到body的伪元素上，进一步优化显示效果：

/* 基础样式保持不变 */
span{
  display: block;
  font-weight: bold;
  margin: 3px;
  padding: 10px;
  border: 1px solid blue;
}

div{
  overflow: hidden;
  position: relative;
  background: #eeeeee;
}

/* 基于body伪元素的tooltip */
body:has([data-tooltip]:hover)::before {
  content: attr(data-tooltip);
  position: absolute;
  background: lightgray;
  border: 1px solid black;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  z-index: 9999;
  /* 需结合JS设置元素位置变量，纯CSS无法获取动态位置 */
  top: calc(var(--tooltip-top) - 1.5rem);
  left: var(--tooltip-left);
}

说明 #

• 此方案将tooltip完全脱离父元素，彻底避免被overflow:hidden截断
• 但纯CSS无法获取元素的动态位置，若要实现完美的跟随滚动效果，仍需少量JavaScript代码设置--tooltip-top和--tooltip-left变量

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