如何解决CSS tooltip屏幕边缘溢出、移动端尺寸与定位异常问题

解决方案 #

纯CSS实现方案（优先推荐） #

核心修改点如下：

• 桌面端移除固定负margin定位，改用动态计算限制左右边界，避免超出视口
• 修复移动端写死坐标的错误逻辑，改为视口自适应居中，同时增加最大高度限制适配大段文本
• 增加文本自动折行处理，避免长内容撑爆tooltip

修改后的完整CSS代码：

body {
    overflow-x: hidden;
    overflow-y: scroll;
}

.ref {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.ref .versekjv {
    visibility: hidden;
    max-width: min(280px, 90vw);
    width: max-content;
    background-color: black;
    color: #fff;
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    z-index: 98;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    /* 限制左右不超出视口10px安全边距 */
    margin-left: max(0px, 10px - calc(50% + 140px));
    margin-right: max(0px, 10px - calc(100% - 50% + 140px));
    overflow-wrap: break-word;
    word-break: break-word;
    /* 原代码冗余属性可删除：flex-direction: column; 如需flex排版请补充display: flex */
}
.ref .versekjv::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}
.ref:hover .versekjv {
    visibility: visible;
}

.redletters {
    color:red; 
}

@media screen and (max-width:1000px){ 
   .ref .versekjv {
    font-size: 1rem;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    white-space: normal;
    z-index: 999;
   }

   .ref .versekjv::after {
       border-color: transparent;
   }
}

可选JS增强方案（适配所有极端场景） #

如果需要更精准的边缘检测和箭头位置同步，可引入几十行原生JS实现，无需任何框架依赖，直接插入页面<script>标签即可生效：

document.querySelectorAll('.ref').forEach(ref => {
  const tooltip = ref.querySelector('.versekjv');
  ref.addEventListener('mouseenter', () => {
    tooltip.style.visibility = 'visible';
    const rect = tooltip.getBoundingClientRect();
    const viewportWidth = window.innerWidth;
    // 处理左溢出
    if (rect.left < 10) {
      tooltip.style.transform = 'translateX(0)';
      tooltip.style.left = '10px';
    }
    // 处理右溢出
    if (rect.right > viewportWidth - 10) {
      tooltip.style.transform = 'translateX(0)';
      tooltip.style.left = 'auto';
      tooltip.style.right = '10px';
    }
  });
  ref.addEventListener('mouseleave', () => {
    // 离开后重置样式
    tooltip.style.visibility = '';
    tooltip.style.transform = '';
    tooltip.style.left = '';
    tooltip.style.right = '';
  });
});

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