表格单元格使用text-overflow:ellipsis后tooltip位置偏右问题求助

问题原因 #

tooltip偏移是因为两个核心配置缺失：

• 承载tooltip的<p>标签没有设置position: relative，导致伪元素的绝对定位基准不是p标签本身，而是更上层的父元素
• 原有伪元素的偏移是写死的固定值，没有适配不同长度的tooltip内容，导致长文本时位置偏移

修正后的完整代码 #

CSS 部分

table { 
  width: 40%; 
  table-layout: fixed; 
} 
th { 
  text-align: left; 
} 
td:first-child { 
  text-align: center; 
} 
td.td-name p[data-tooltip] { 
  position: relative;
  text-overflow: ellipsis; 
  overflow: hidden; 
  width: 100%; 
  white-space: nowrap; 
  margin: 0;
} 
[data-tooltip]::after { 
  position: absolute; 
  left: 50%;
  top: -40px;
  min-width: max-content;
  max-width: 300px;
  text-align: center; 
  box-sizing: border-box; 
  content: attr(data-tooltip); 
  background: rgba(0, 0, 0, 0.5); 
  padding: 8px; 
  border-radius: 10px; 
  font-size: 0.9em; 
  font-weight: bold; 
  z-index: 200; 
  color: #fff; 
  visibility: hidden; 
  opacity: 0; 
  transform: translate(-50%, 10px); 
  transition: all .3s ease-in-out; 
} 
td.td-name:hover [data-tooltip]::after { 
  opacity: 1; 
  visibility: visible;
  transform: translate(-50%, 0); 
}

HTML 部分（无需修改，和原有代码一致即可）

<table border="1"> 
  <thead style=""> 
    <tr> 
      <th style="width: 5%;">Preview</th> 
      <th style="width: 15%;">Name</th> 
      <th style="width: 5%;">Size</th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr> 
      <td style="width: 50%;"> 
        <img src="https://picsum.photos/40" alt=""> 
      </td> 
      <td class="td-name" style="width: 15%;"> 
        <p data-tooltip="document-attachment-20211130-41110PM.zip">document-attachment-20211130-41110PM.zip</p> 
      </td> 
      <td style="width: 5%;"> 
        <p class="size"> 
          <strong>28.5 KB</strong> 
        </p> 
      </td> 
    </tr> 
    <tr> 
      <td style="width: 50%;"> 
        <img src="https://picsum.photos/40" alt=""> 
      </td> 
      <td class="td-name" style="width: 15%;"> 
        <p class="name" data-tooltip="upload-to-cloud-form-design-for-mobile-web-application-upload-to-cloud-form-design-for-mobile-web-application.zip">upload-to-cloud-form-design-for-mobile-web-application-upload-to-cloud-form-design-for-mobile-web-application.zip</p> 
      </td> 
      <td style="width: 5%;"> 
        <p class="size"> 
          <strong>28.5 KB</strong> 
        </p> 
      </td> 
    </tr> 
  </tbody> 
</table>

关键修改说明 #

• 用p[data-tooltip]选择器统一给所有带tooltip的段落设置相对定位和溢出截断规则，避免漏加类导致样式失效
• 采用left: 50% + transform: translateX(-50%)的组合实现tooltip水平居中，不管内容长度多少都不会偏移
• 增加min-width和max-width控制tooltip的宽度范围，适配不同长度的文本内容
• 调整了hover时的transform偏移，实现 tooltip 从下往上滑入的过渡效果

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