最右侧按钮Tooltip位置异常 跳转至页面左侧如何修复

问题根因 #

最右侧删除按钮的tooltip绑定在了外层无定位、无固定宽度的<span>元素上，而内部的删除按钮<a>使用了pull-right浮动脱离了普通文档流，导致外层<span>的实际占位宽度为整行容器宽度，tooltip计算位置时默认取绑定元素的左边缘为基准，因此偏移到了页面左侧。 #

可行修复方案 #

方案1：调整tooltip绑定对象（最推荐） #

将tooltip的绑定属性从外层<span>移动到内部浮动的<a>标签上，直接以实际可见的按钮元素作为位置计算基准，不会出现偏移。
修改后的HTML代码：

<!-- 父容器加clearfix清除浮动避免高度塌陷，也能优化位置计算精度 -->
<div class="col-md-12 clearfix">
  <span>
     <!-- 将tooltip相关属性移到实际的按钮a标签上 -->
     <a data-toggle="modal" data-toggle="tooltip" data-placement="top" title="text" class="pull-right text-danger">
       <i class="fa fa-lg fa-fw fa-trash del-icon"></i>
     </a>
  </span>
  <a class="pull-right text-primary" data-toggle="tooltip" data-placement="top" title="text">
    <p class="text-right"><i class="fa fa-lg fa-fw fa-pencil edit-icon"></i></p>
  </a>
  <a class="pull-right text-success" data-toggle="tooltip" data-placement="top" title="text">
    <p class="text-right"><i class="fa fa-lg fa-fw fa-clone clone-icon"></i></p>
  </a>
</div>

方案2：给外层span添加浮动属性 #

如果需要保留tooltip在span上的绑定逻辑，直接给外层span加pull-right类，让span和内部按钮一起浮动，此时span的宽度等于内部按钮宽度，位置计算就会恢复正常：

<span data-toggle="tooltip" data-placement="top" title="text" class="pull-right">
   <a data-toggle="modal" class="text-danger">
     <i class="fa fa-lg fa-fw fa-trash del-icon"></i>
   </a>
</span>

方案3：初始化时指定container参数 #

如果以上调整后仍有偏移，初始化tooltip时添加container: 'body'参数，让tooltip直接插入到body节点下计算位置，避开父容器的浮动、定位规则干扰：

$(function () {
   $('[data-toggle="tooltip"]').tooltip({
     container: 'body'
   })
})

注意事项 #

不要单独给tooltip组件加pull-right类调整位置，这种方式会破坏所有tooltip的统一对齐逻辑，从绑定对象和父容器定位层面修复才是长期稳定的方案。

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