Tooltip set on a button displaying a modal dialog is reappearing after closing the dialog

Question

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.net/2gdrL6sf/

jasonmerino · Accepted Answer · 2014-09-05 05:55:47Z

11

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!

answered Sep 5, 2014 at 5:55

jasonmerino

3,2402 gold badges23 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bruno Over a year ago

Great! It seems to be working. I'm curious, is it possible to not focus the button at all on modal close?

jasonmerino Over a year ago

I'm sure it is possible to not focus the button, but you'd have to track down what is causing the focus. There are modal events for showing and hiding you can hook into that may help with that. You can check the docs for available events.

Bruno Over a year ago

All right, thanks :) I believe I am not a veteran enough in javascript to inspect a framework's code..!

SamO · Accepted Answer · 2021-01-05 15:35:09Z

1

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.

answered Jan 5, 2021 at 15:35

SamO

112 bronze badges

Collectives™ on Stack Overflow

Tooltip set on a button displaying a modal dialog is reappearing after closing the dialog

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related