Bootstrap button tooltip hide on click : <p>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.</p>

<p>Is use this code:</p>

<pre><code>&lt;button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default" data-toggle="modal" data-target="#DeleteUserModal"&gt;
  &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
&lt;/button&gt;

&lt;div&gt;modal&lt;/div&gt;

&lt;script&gt;
$(document).ready(function(){
  $('[rel="tooltip"]').tooltip();
});
&lt;/script&gt;
</code></pre>

<p>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.</p>

<p>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.</p>
