Bootstrap button tooltip hide on click

You should open the modal manually with an on click function and hide the tooltip manually via jquery. So take the modal toggling attributes out of the button like so:

<button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default">
  <span class="glyphicon glyphicon-remove"></span>
</button>

and then open the modal with your own jquery onclick function as well as hide the tooltip at the same time like so:

$(document).ready(function(){
  $('[rel="tooltip"]').tooltip();
  $('[rel="tooltip').on('click', function () {
    $(this).tooltip('hide');
    $("#DeleteUserModal").modal();
  });
});

Here is a fiddle to show you this working Fiddle

For your whole project hide tooltip

   $(document).ready(function(){
       $('[data-toggle="tooltip"]').click(function () {
          $('[data-toggle="tooltip"]').tooltip("hide");

       });
   });

Fixed it by using.

$(document).ready(function(){
    $('[rel=tooltip]').tooltip({ trigger: "hover" });
});

The problem was that focus stays on the button when the modal is open. Changing the trigger to hover solves the problem.