如何用纯CSS检测元素是否靠近屏幕边缘并调整tooltip位置？

可以用纯CSS实现这个需求，目前有两种可行思路：基于现代CSS锚点定位的优雅方案，以及兼容性更好的技巧性方案。

方案一：CSS锚点定位（推荐，现代浏览器支持） #

CSS锚点定位是专门为弹出层自适应场景设计的特性，能自动检测锚点元素（你的触发链接）与视口的位置关系，自动调整Tooltip的显示方向，避免溢出视口。

修改你的代码如下：

a.tooltip {
  position: relative;
  /* 定义锚点名称 */
  anchor-name: --tooltip-anchor;
}

a.tooltip > div {
  position: absolute;
  display: none;
  max-width: 350px;
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px;
  /* 绑定到锚点 */
  position-anchor: --tooltip-anchor;
  /* 默认显示在锚点右侧，自动处理溢出 */
  inset-area: right;
  /* 添加锚点与tooltip的间距 */
  margin: 0 8px;
}

a.tooltip:focus > div,
a.tooltip:hover > div {
  display: inline-block;
}

这个方案会自动处理所有边缘情况：当触发元素靠近屏幕右侧时，Tooltip会自动切换到左侧；如果靠近顶部/底部，也会自动调整上下位置。需要注意的是，锚点定位目前仅在Chrome 115+、Edge 115+等现代浏览器支持，如需兼容旧浏览器可以用下面的方案。

方案二：兼容性技巧方案（无新特性依赖） #

如果需要兼容不支持锚点定位的浏览器，可以通过设置Tooltip的双向定位，利用视口宽度计算强制处理溢出：

a.tooltip {
  position: relative;
}

a.tooltip > div {
  position: absolute;
  display: none;
  max-width: 350px;
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px;
  /* 默认显示在右侧 */
  left: calc(100% + 8px);
  top: 0;
  /* 当Tooltip超出视口右侧时，强制左移的备选位置 */
  right: calc(100% + 8px);
  /* 让浏览器自动选择不会溢出视口的方向 */
  margin-left: auto;
  margin-right: auto;
  /* 限制宽度，避免过度拉伸 */
  width: max-content;
  max-width: 350px;
}

a.tooltip:focus > div,
a.tooltip:hover > div {
  display: inline-block;
}

这个方案的原理是同时给Tooltip设置左右两个偏移位置，让浏览器自动选择不会溢出视口的方向显示。不过它的局限性是无法精确控制“距离右侧X像素”的阈值，只能依赖浏览器的自动溢出判断。

注意事项 #

• 两种方案都完全基于纯CSS实现，不需要任何JavaScript。
• 方案一的锚点定位是标准方案，功能更强大，建议优先在现代浏览器环境中使用。
• 方案二兼容性更好，但逻辑相对简陋，适合需要兼容旧版浏览器的场景。

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