Bootstrap3表格单元格文本换行时Tooltip悬停失效问题求解

问题分析 #

在表格「Position」列使用Bootstrap3 Tooltip时，核心问题在于Tooltip默认绑定的行内元素仅占据文本内容区域，当鼠标移到单元格内的文本间隙处时，会脱离触发元素的范围，导致Tooltip消失，鼠标指针样式也随之改变。直接将Tooltip绑定到父级<td>元素会插入额外div破坏表格布局，通过CSS调整触发元素的范围即可解决该问题。

解决方案 #

通过CSS让Tooltip的触发元素铺满整个<td>单元格，确保鼠标在单元格内任意区域都能触发并保持Tooltip显示：

1. 给Tooltip触发元素添加自定义类（例如tooltip-full-cell）
2. 添加以下CSS样式：

.tooltip-full-cell {
  display: block;
  width: 100%;
  height: 100%;
  padding: inherit; /* 继承单元格内边距，避免布局错位 */
  box-sizing: border-box; /* 确保内边距不会撑大元素 */
}

3. 保持Tooltip绑定到该触发元素上即可，无需修改原有表格结构。

原理说明 #

将触发元素设置为块级元素并铺满单元格后，它的可触发范围会覆盖整个<td>区域。此时鼠标在单元格内任意位置悬停，都处于触发元素的范围内，Tooltip会持续显示，同时鼠标指针样式也能保持一致。

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