Bootstrap5中text-truncate下Tooltip位置偏移问题求解

问题根源 #

你的Tooltip绑定在<a>标签上，但这个<a>是行内元素，它的宽度是原长文本的完整宽度（不受外层text-truncate span的约束），Bootstrap Tooltip默认会基于目标元素的尺寸居中定位，所以才会偏移到其他单元格。

解决方法 #

1. 转移Tooltip绑定目标

把Tooltip的所有属性（data-bs-toggle、data-bs-placement、data-bs-title等）从<a>标签移到外层的text-truncate span上——这个span是有固定max-width的块级容器，它的尺寸是实际显示的截断后宽度，Tooltip基于这个容器定位就不会偏移了。

2. 优化hover触发区域

给<a>标签添加样式，让它占满外层span的宽度，确保整个截断区域都能触发Tooltip：

a.truncate-link {
  width: 100%;
  display: inline-block;
  text-decoration: none; /* 可选，保持样式一致 */
}

修改后的完整代码示例

<td style="cursor: pointer">
  <span
    class="d-inline-block text-truncate"
    style="max-width: 350px"
    data-bs-toggle="modal"
    data-bs-target="#literModal"
    data-pmid="{{ literature.pmid }}"
    data-title="{{ literature.article_title }}"
    data-bs-custom-class="custom-tooltip"
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    data-bs-title="{{ literature.article_title }}"
  >
    <a class="truncate-link" href="javascript:void(0)">
      {{ literature.article_title | default:"None" }}
    </a>
  </span>
</td>

额外优化（可选）

如果仍有轻微偏移，可以通过data-bs-offset属性自定义Tooltip的偏移量，比如：

<span
  ...
  data-bs-offset="0, 5"
>

或者通过JavaScript初始化时配置：

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {
  offset: [0, 5]
}))

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