Bootstrap button tooltip hide on click

Bootstrap button tooltip hide on click

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:

modal

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.

Solutions/Answers:

Solution 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.

Solution 2:

For your whole project hide tooltip

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

       });
   });

Solution 3:

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:

Related:  2 columns of equal height - Twitter's Bootstrap 2.0
$(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

Solution 4:

If you want to close the tooltip before an action, can use this:

$('[data-toggle="tooltip"]').tooltip("hide");

For example, i want to close the tooltip before open modal, here my code:

function OpenModal() {
    $('[data-toggle="tooltip"]').tooltip("hide");
    $("#myModal").modal();
}

Solution 5:

Try to use this Javascript code, I just tried it, and it worked for me.

$(function () {
    $('body').tooltip({
        selector: '[data-toggle="tooltip"]'
    }).click(function () {
        $('[data-toggle="tooltip"]').tooltip("hide");
    });
})

Solution 6:

Don’t use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.

References