Bootstrap Tooltip被截断问题：如何添加样式让提示框悬浮于上方？

嘿，这个问题我之前做项目的时候也踩过坑！Bootstrap Tooltip被行高或者容器遮挡，大多是容器溢出隐藏或者层级不够导致的，结合你给出的代码，我给你几个实用的解决办法：

1. 先检查容器的overflow属性 #

你的.list-group-item或者内部的.flex容器很可能继承了Bootstrap默认的overflow: hidden，这会把超出容器范围的Tooltip给截掉。直接给这些容器加个样式就行：

/* 覆盖list-group-item的默认overflow */
.list-group-item {
  overflow: visible !important;
}
/* 确保flex容器也不会截断Tooltip */
.flex {
  overflow: visible !important;
}

这里的!important是为了强制覆盖Bootstrap的默认样式，如果你的自定义样式优先级足够（比如放在Bootstrap样式之后引入），也可以不用。

2. 提升Tooltip的层级 #

如果容器没有截断，但Tooltip还是被其他元素压在下面，那就是z-index的问题了。给Tooltip加个更高的层级：

.tooltip {
  z-index: 9999 !important;
}

这个数值可以根据你页面里其他元素的层级调整，只要比周围元素的z-index大就行，一般9999足够应付大部分场景。

3. 调整Tooltip的显示位置（备选方案） #

要是上面两个方法都没解决，你可以试试改变Tooltip的触发位置，让它避开被遮挡的区域。比如直接在图标标签里加属性：

<i class="fa fa-clock-o m-l-xs" data-toggle="tooltip" title="你的提示文本" data-placement="top"></i>

或者在初始化Tooltip的时候设置：

$('[data-toggle="tooltip"]').tooltip({
  placement: 'top' // 可选值：top/right/bottom/left
});

给你修改后的代码示例 #

结合上面的方法，你的代码可以改成这样：

<div ng-repeat="item in c.data.list track by $index" class="list-group-item">
  <div class="flex">
    <div style="margin-right:auto;">
      <span class="h4">{{item.short_description}}</span>
      <div>
        <small class="text-muted">
          <!-- 这里加上Tooltip的属性，同时确保容器overflow是visible -->
          <i class="fa fa-clock-o m-l-xs" data-toggle="tooltip" title="时间相关提示" data-placement="top"></i>&...
        </small>
      </div>
    </div>
  </div>
</div>

记得同时加上前面的CSS样式哦！

一般来说，先调整overflow就能解决问题，要是还不行再试层级或者位置调整，这三个方法基本能搞定绝大多数Tooltip被遮挡的情况。

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