如何防止CSS提示框（tool-tip）div向右超出屏幕显示

你可以通过CSS的transform和calc()函数实现需求，不需要媒体查询。核心思路是：默认让提示框左侧距离触发元素50px，当提示框右侧超出视口时，自动向左偏移，让提示框右侧贴合屏幕边缘。

具体CSS修改方案 #

假设你的提示框类名为.tool-tip，修改其样式如下：

.tool-tip {
  position: absolute;
  /* 默认位置：左侧距离父元素50px */
  left: 50px;
  /* 自动计算偏移量，超出时左移让右侧贴屏幕 */
  transform: translateX(max(0px, calc(50px + 100% - 100vw)) * -1);
  /* 可选：限制最大宽度，避免提示框过宽 */
  max-width: calc(100vw - 60px);
  /* 保留你原有提示框的样式（背景、内边距、字体样式等） */
}

原理说明 #

• 100vw代表当前屏幕的视口宽度，100%是提示框自身的宽度。
• calc(50px + 100% - 100vw)会计算提示框右侧超出屏幕的距离：结果为正说明超出，为负或0则说明未超出。
• max(0px, ...)确保只有超出时才触发偏移，未超出时偏移量为0，保持默认位置。
• 乘以-1让提示框向左偏移对应距离，刚好让右侧贴合屏幕边缘。
• max-width设置是为了给屏幕左右留少量间距，你可以根据需求调整数值。

适配ASP生成的图标 #

确保触发提示框的图标父元素设置position: relative，这样提示框的绝对定位会相对于父元素生效：

' 示例ASP代码，给图标外层容器添加相对定位
Response.Write "<div style='position: relative; display: inline-block;'>"
Response.Write "<img src='your-icon-path.png' class='tooltip-trigger' />"
Response.Write "<div class='tool-tip'>这里是提示内容</div>"
Response.Write "</div>"

修改后，鼠标悬停在屏幕右侧图标上时，提示框会自动调整位置避免超出；在左侧区域时，保持默认的left:50px位置显示。

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