スタック・オーバーフローに参加する
679万人以上のプログラマーが集まるスタック・オーバーフローに参加しませんか？
簡単な登録後、すぐにご利用いただけます。
登録
up vote 3 down vote favorite

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.

share|improve this question
    
use $('[rel=tooltip]').tooltip('disable') in your onclick function – Nitin Dhomse Jan 29 '16 at 8:07
up vote 8 down vote accepted

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.

share|improve this answer
    
This helps, but i still have a similar issue with a dropdown toggle tooltip. On a button with a dropdown, i have a tooltip on the button and when you click it, the dropdown shows but the tooltip remains visibile, tempted to $('body').click( hide all tooltips ) – Prof83 Nov 4 '16 at 14:32
up vote 1 down vote

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

share|improve this answer
up vote 0 down vote

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.

share|improve this answer
    
I tried wrapping the button with <div rel="tooltip" title="test"></div> and removing the tooltip from the button itself. Same effect. – Mbrouwer88 Jan 29 '16 at 8:13
    
Add data-toggle="tooltip" don't use rel. – mokiSRB Jan 29 '16 at 8:14
    
Sorry, same effect. It seems somehow the "focus" stays on the button bacause it's been clicked I can still see the "glow" around the button in the background when the modal is open. – Mbrouwer88 Jan 29 '16 at 8:22
up vote 0 down vote

The problem is that the button gets the focus when the modal closes.

So, use this code to remove focus programmatically on modal closed event: 

$('#myModal').on('hidden.bs.modal', function () {
   $('[rel="tooltip"]').blur();
});
share|improve this answer
    
When I do this, it works only half. The tooltip is hidden when the modal opens, but when I close the modal the tooltip pops up again. – Mbrouwer88 Jan 29 '16 at 8:16
    
Do you have a minimal jsfiddle example ? – Derlin Jan 29 '16 at 8:16
    
changed my answer. – Derlin Jan 29 '16 at 9:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.