MVC项目中如何让Bootstrap提示框更贴近文本底部？

你可以通过调整Bootstrap Tooltip的偏移量来实现需求，以下是两种实用方法：

方式一：使用内置CSS变量（推荐Bootstrap 5+） #

Bootstrap 5及以上版本提供了--bs-tooltip-offset变量，用来控制提示框和目标元素的间距，默认值约8px。你可以按需调整这个值：

给单个元素设置 #

直接修改span标签，添加style属性自定义偏移：

<td> 
  <span 
    data-trigger="manual" 
    data-bs-toggle="tooltip" 
    data-bs-placement="top"  
    title="View this participant"
    style="--bs-tooltip-offset: 2px;"
  >NAME </span>
</td>

数值越小，提示框越贴近文本底部，可根据显示效果微调。

全局统一调整tbody内的top提示框 #

如果需要让表格tbody里所有top位置的提示框都贴近文本，在CSS中添加：

tbody [data-bs-placement="top"] {
  --bs-tooltip-offset: 2px;
}

方式二：直接覆盖Tooltip样式（适配Bootstrap 4及更早版本） #

对于旧版Bootstrap，或者需要更精细控制的场景，直接修改tooltip的margin值：

/* 仅针对tbody内的top提示框 */
tbody .tooltip.top {
  /* 默认margin-top为-3px，调小数值让提示框上移 */
  margin-top: -8px !important;
}

注意事项 #

确保已正确初始化tooltip，在页面JS中添加：

document.addEventListener('DOMContentLoaded', function() {
  const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el))
})

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