Bootstrap Button Tooltip

Question

I have several buttons on my site. When the user clicks the button, the modal opens. When the user clicks the button, a tooltip is displayed.

Uses 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 remains visible after clicking the button and the modal mode is displayed. Once the modal function is closed, the tooltip hides again.

How to prevent this? I want the tooltip to be displayed only when you hover over it, and not all the time when the visible kind of modality is visible.

Answer 1

Fixed with.

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

The problem was that the focus remains on the button when the modal is open. Changing the trigger for hovering solves the problem.

Answer 2

Hide the tooltip for the entire project

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

Answer 3

You should open the modal manually using the "on click" function and hide the tooltip manually using jquery. So remove the modal attribute switching from the button as follows:

 <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 using the jquery onclick native function, while hiding the hint, as shown below:

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

Here is the violin to show you this work. Violin

Answer 4

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

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

For example, I want to close the tooltip in front of an open modal, here is my code:

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

Answer 5

Try using 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"); }); }) 

Answer 6

Do not use data attributes from multiple plugins in the same element. For example, a button cannot have a tooltip and switch modal. To do this, use a wrapper element.

Answer 7

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

Answer 8

Inside your document, the finished function use this:

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

Answer 9

I know this is old, but here is the simplest fix for a tooltip for a button to start a modal ...

 <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> <span data-toggle="modal" data-target="#exampleModal">Tooltip & modal</span> </button> 

Put tooltip and modal on 2 separate elements.