Bootstrap button tooltip hide on click

Question

On my site I have some buttons. When a user clicks the button, a modal opens. When a user hovers the button, a tooltip is shown.

Is use this code:

<button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default" data-toggle="modal" data-target="#DeleteUserModal">   <span class="glyphicon glyphicon-remove"></span> </button>  <div>modal</div>  <script> $(document).ready(function(){   $('[rel="tooltip"]').tooltip(); }); </script> 

This works, but the only problem is that the tooltip stays visible after the button is clicked, and the modal is shown. As soon as the modal is closed, the tooltip is hidden again.

How to prevent this? I only want the tooltip to be shown on hover, and not all the time when the related modal is visible.

Answer 1

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.

Answer 2

For your whole project hide tooltip

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