图片滑块中Tooltip位置异常及滚动后隐藏问题求助

问题场景 #

我做了一个带图片和标题的滑块容器，标题过长用text-overflow截断，hover时通过tooltip显示完整标题。初始状态正常，但滑动滑块后，tooltip位置固定不随卡片移动；给tooltip加position: relative导致布局错乱；给.image-container加position: relative后tooltip能随滚动移动，但会被容器截断隐藏。

解决思路 #

1. 让tooltip相对于单个卡片容器定位：给每个卡片的.container设置position: relative，这样tooltip的位置会绑定到对应卡片，滑动时自然跟随。
2. 调整tooltip的定位方式：用position: absolute代替relative，避免破坏原有布局，同时精准控制tooltip的显示位置。
3. 修复容器截断问题：调整.image-container的overflow属性，允许y轴内容溢出不隐藏，确保tooltip完整显示。

修改后的CSS代码 #

.container {
  margin: 10px;
  display: inline-block; 
  justify-content: center;
  width: 50%;
  flex-direction: column;
  border: 1px solid black;
  position: relative; /* 新增：让tooltip相对当前卡片定位 */
}

.caption{
  justify-content: center;
  border-top: 1px solid black;
}

.image{
  width: 100%;
  vertical-align: middle;
}
 
.image-container {
  vertical-align: middle;
  display: inline-block;
  white-space: nowrap;
  overflow-x: auto; /* 保留x轴滚动 */
  overflow-y: visible; /* 修改：允许y轴内容溢出，避免截断tooltip */
  width: 100%;
}
 
.details{
  background-color: white;
  position: relative;
  overflow: scroll;
  box-sizing: border-box;
  height: 100vh;
}

.ellipsis {
  position: relative;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding:.5rem 1rem;
  cursor: pointer;
}

.ellipsis:hover{
  color: red; /* 修正原CSS的选择器错误 */
}

.box{
  border-top: 1px solid black;
}

.tooltiptext{
  position: absolute; /* 修改：绝对定位，基于.container */
  bottom: 100%; /* 定位到标题上方，可根据需求调整为top:100%放在下方 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  z-index: 999; /* 提高层级，避免被其他元素遮挡 */
  background-color: #000;
  border-radius: 7px;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  padding: 10px; /* 增加内边距提升可读性 */
  display: block;
  width: 200px;
  word-wrap: break-word;
  white-space: normal;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow: auto;
}

.ellipsis:hover+.tooltiptext{
  visibility: visible;
  opacity: 1;
}

关键修改说明 #

• .container新增position: relative：将tooltip的定位上下文绑定到单个卡片，滑动时tooltip跟随卡片移动。
• .tooltiptext改为position: absolute：脱离文档流，不会影响原有布局，同时通过bottom/left/transform实现居中定位。
• .image-container修改overflow-y: visible：允许tooltip超出容器范围显示，避免被截断。
• 修正原CSS中.ellipsis:focus .ellipsis:hover的选择器错误，改为直接.ellipsis:hover实现hover变色效果。

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