根据元素屏幕位置动态设置Tooltip的CSS定位属性

这个需求确实很实用——默认固定定位的tooltip特别容易在屏幕边缘被截断，尤其是当触发元素在大段文本里位置不固定的时候。纯CSS没法直接实现这种基于视口位置的动态定位，我们得结合JavaScript来计算元素的视口坐标，然后动态调整tooltip的样式。

实现思路 #

核心逻辑是：当鼠标悬停在带tooltip的元素上时，通过getBoundingClientRect()获取该元素相对于视口的位置，判断它处于屏幕的左/右半区、上/下半区，然后给tooltip设置对应的left/right、top/bottom属性，确保tooltip始终显示在屏幕可视范围内。

完整代码实现 #

HTML部分

<div style="height:200px"></div>

<div>
  <span class="word-with-tooltip">
    Left Car
    <div class="tooltip">A vehicle with four wheels</div>
  </span>
</div>

<div style="text-align:center;">
  <span class="word-with-tooltip">
    Centered Car
    <div class="tooltip">A vehicle with four wheels</div>
  </span>
</div>

<div style="text-align:right;">
  <span class="word-with-tooltip">
    Right Car
    <div class="tooltip">A vehicle with four wheels</div>
  </span>
</div>

<div style="height:200px"></div>

CSS部分

.word-with-tooltip {
  position: relative;
  /* 给触发元素加个下划线，提示可hover */
  text-decoration: underline dotted;
  cursor: help;
}

.tooltip {
  position: absolute;
  height: 100px;
  width: 200px;
  display: none;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  background-color: #dddddd;
  text-align: left;
  /* 加个内边距，让文本不贴边 */
  padding: 0.5em;
}

.word-with-tooltip:hover .tooltip {
  display: block;
}

JavaScript部分

// 获取所有带tooltip的元素
const tooltipTriggers = document.querySelectorAll('.word-with-tooltip');

tooltipTriggers.forEach(trigger => {
  // 监听鼠标悬停事件
  trigger.addEventListener('mouseover', (e) => {
    const tooltip = trigger.querySelector('.tooltip');
    if (!tooltip) return;
    
    // 获取触发元素相对于视口的位置信息
    const triggerRect = trigger.getBoundingClientRect();
    // 获取视口的宽高
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;
    
    // 计算触发元素的水平中心位置
    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
    // 计算触发元素的垂直中心位置
    const triggerCenterY = triggerRect.top + triggerRect.height / 2;
    
    // 水平方向定位：左半区设left:0，右半区设right:0
    if (triggerCenterX < viewportWidth / 2) {
      tooltip.style.left = '0';
      tooltip.style.right = 'auto';
    } else {
      tooltip.style.right = '0';
      tooltip.style.left = 'auto';
    }
    
    // 垂直方向定位：上半区设top:1em（显示在元素下方），下半区设bottom:1em（显示在元素上方）
    if (triggerCenterY < viewportHeight / 2) {
      tooltip.style.top = '1em';
      tooltip.style.bottom = 'auto';
    } else {
      tooltip.style.bottom = '1em';
      tooltip.style.top = 'auto';
    }
  });
});

代码说明 #

1. CSS调整：移除了tooltip原有的固定right和bottom属性，避免和JS动态设置的样式冲突；同时给触发元素加了装饰样式，提升交互提示性。
2. JS核心逻辑：
   • 使用getBoundingClientRect()获取元素的视口坐标，这是判断位置的关键；
   • 通过计算元素的中心位置，判断它属于屏幕的哪个半区；
   • 动态设置tooltip的定位属性时，把对立属性设为auto，确保样式不会互相覆盖；
3. 交互体验：只有当鼠标悬停时才计算位置，性能开销很低，而且tooltip会自动适配触发元素的屏幕位置，再也不会被边缘截断。

备注：内容来源于stack exchange，提问作者sdo