如何让Tooltip突破overflow:hidden的滚动元素边界？

一、让Tooltip超出滚动元素边界显示（纯CSS方案） #

问题根源是滚动容器#messages设置了overflow-x: hidden，导致内部绝对定位的Tooltip被裁剪。通过调整溢出属性层级解决：

1. 修改#messages的横向溢出设置，允许内容横向溢出：

#messages {
  overflow-x: visible; /* 替换原来的overflow-x: hidden */
}

2. 给单个消息容器.message添加横向溢出隐藏，避免消息内容本身横向滚动：

.message {
  overflow-x: hidden;
}

3. 确保.emote设置为相对定位，让Tooltip的绝对定位基于它：

.emote {
  position: relative; /* 取消之前的注释 */
}

二、修复Tooltip内图片自适应宽度问题 #

当前图片被固定高度和object-fit: cover裁剪，调整样式让图片保持比例并自适应Tooltip宽度：

1. 移除Tooltip的固定宽度，改为自适应并限制最大宽度：

.message-tooltip {
  width: auto; /* 替换原来的width: var(--px128) */
  max-width: 90vw; /* 防止Tooltip过宽超出屏幕 */
  min-width: var(--px128); /* 保持最小宽度，可选 */
}

2. 修改图片样式，让它保持原始比例完整显示：

.message-tooltip img {
  height: auto; /* 替换原来的height: var(--px128) */
  max-height: var(--px128); /* 限制图片最大高度，避免过高 */
  width: 100%;
  object-fit: contain; /* 替换cover，完整显示图片 */
}

三、优化Tooltip定位避免超出屏幕（可选） #

当emote靠近屏幕右侧时，Tooltip可能部分超出屏幕，用clamp函数限制左定位：

.message-tooltip-shift {
  left: clamp(var(--px12), 50%, calc(100vw - var(--px12) - var(--px128)));
  transform: translateX(-50%);
}

这个设置会让Tooltip始终保持在屏幕内，左右两边至少保留var(--px12)的间距。

如果纯CSS方案无法满足复杂场景（比如动态内容的精准定位），可以考虑复用单个Tooltip的方案：

• 在#chat容器下添加一个全局Tooltip元素（不在#messages内）
• 通过JavaScript监听emote的mouseover事件，动态设置全局Tooltip的内容、位置并显示；mouseout时隐藏
• 这种方式能完全避免滚动容器的裁剪问题，且更灵活控制定位

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