工具提示丢失其在页面中的位置

Question

我的按钮中有一些工具提示，问题是最后一个最右边的按钮工具提示放置效果不佳，它应该出现在按钮下方时跳到页面左侧。

https://jsfiddle.net/anastaciu/jce7qup1/1/

<div class="col-md-12">
  <span data-toggle="tooltip" data-placement="top" title="text">
     <a data-toggle="modal" 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>

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

如果我给它 class pull-right 它会保持在右边，但它会失去与其他工具提示的对齐。

我该如何解决这个问题？

Answer 1

看看这是否适用于您的用例：

我确实将 <span> 放在了 <a> 标签中。

我还在 span 上留下了删除图标 data-toggle="tooltip"，而其他的在 <a> 标签上，以证明这 2 个元素中的哪个元素具有删除图标并不重要数据属性。这有一个额外的好处，允许您的模式使用 data-toggle 和工具提示在同一个点击事件上使用 data-toggle。

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

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>




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

  <a class="pull-right text-primary" data-toggle="tooltip" data-placement="top" title="text">
    <span class="text-right"><i class="fa fa-lg fa-fw fa-pencil edit-icon"></i></span>
  </a>
  <a class="pull-right text-success" data-toggle="tooltip" data-placement="top" title="text">
    <span class="text-right"><i class="fa fa-lg fa-fw fa-clone clone-icon"></i></span>
  </a>
</div>

工具提示丢失其在页面中的位置

Toolptip losing its placement in the page

html

javascript

jquery

tooltip

bootstrap-modal