Toolptip losing its placement in the page

Question

I have some tooltips in my buttons, the problem is that the last, most right button tooltip placement is not working well, it jumps to the left of the page when it should appear bellow the button.

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()
})

If I give it a class pull-right it stays on the right but it loses its alignment with the other tooltips.

How would I fix this?

Answer 1

See if this works for your use case:

I did put the <span>s inside of the <a> tags.

I also left the delete icon data-toggle="tooltip" on the span while the others are on the <a> tags to demonstrate that it doesn't matter which of those 2 elements has that data attribute. This has the added benefit of allowing your modal to use data-toggle and the tooltip to use data-toggle on the same click event.

$(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>