The problem description is in the title - the tooltip reappears when I close the modal dialog.

<script type="text/javascript">
    $(function () {
        $('[data-tooltip="tooltip"]').tooltip();
    });
</script>

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#divModal" data-tooltip="tooltip" title="Tooltip!">
    <span class="glyphicon glyphicon-globe"></span>
</button>

see it happening here : /

The problem description is in the title - the tooltip reappears when I close the modal dialog.

<script type="text/javascript">
    $(function () {
        $('[data-tooltip="tooltip"]').tooltip();
    });
</script>

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#divModal" data-tooltip="tooltip" title="Tooltip!">
    <span class="glyphicon glyphicon-globe"></span>
</button>

see it happening here : http://jsfiddle/2gdrL6sf/

• javascript
• jquery
• css
• twitter-bootstrap

2 Answers 2

The problem is that the button is gaining focus when the modal is closed. To get around the tooltip showing again after the modal is closed you could restrict the tooltips trigger to a hover like so:

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

I forked your JSFiddle and have a working demo you can check out.

Hope that helps!

In the button click handler, add a blur call to remove focus.

$('#myButton').click(function() {
    $(this).blur();
    $('#myDialog').dialog('open');
});

Buttons need to have focus and display a tooltip when not clicked so that assistive technologies can be effective. Somebody that's unable to use a mouse might need to tab between buttons. Setting the tooltip to only trigger on hover removes that capability.