I am trying to close bootstrap popover using ESC key press.

But it does not seem to be working when using:

$(document).keyup(function (event) {
    if (event.which === 27) {
        $('#example').popover('hide');
    }
});         

Here is the fiddle with bootstrap popover:

/

I am trying to close bootstrap popover using ESC key press.

But it does not seem to be working when using:

$(document).keyup(function (event) {
    if (event.which === 27) {
        $('#example').popover('hide');
    }
});         

Here is the fiddle with bootstrap popover:

http://jsfiddle/mashinista/b2NKt/

• javascript
• jquery
• twitter-bootstrap

• Code works fine: jsfiddle/koala_dev/b2NKt/1 – omma2289 Commented Jul 9, 2014 at 17:19
• thanks, must have missed something – user3288556 Commented Jul 9, 2014 at 17:49
• Interestingly, the modal plugin has a keyboard option which is true by default and automatically closes the modal when escape key is pressed. That would be a nice feature for the popover as well. – KyleMit ♦ Commented Jul 9, 2014 at 18:13
• @KyleMit Relevant: github./twbs/bootstrap/issues/11269 – cvrebert Commented Jul 10, 2014 at 1:10

2 Answers 2

The fiddle you included has the popover code, but not the escape code.

Add it and, as koala_dev pointed out, you should be fine:

Demo in fiddle

$('#example').popover();

$(document).keyup(function (event) {
    if (event.which === 27) {
        $('#example').popover('hide');
    }
});

Also, this is very similar to how the modal escape function works

The problem with that arises when a tooltip is inside of a modal, because then the Esc key is expected to close the modal. It's a not good user experience if a user only wants to dismiss the tooltip but then the entire modal closes. So I would propose, if there are currently tooltips to dismiss, then a user will need to press Esc twice to close the modal (first time to dismiss tooltips), but otherwise once, as usually. Note: This is not ideal, especially for screen reader users, so take that as a food for the further thinking.

/**
 * Accessibility: Close tooltips and popovers on ESC key (WCAG 1.4.13)
 * Note: Using event capture:true to cancel the propagation preventing the modal to close at first (hence no `.on()` here)
 * Tested with Bootstrap v3.4.1; Does not support IE 11
 */
$.fn.listenEscKeyToCloseOverlays = function () {
    return this.each(function () {
        if (("undefined" !== typeof $.fn.tooltip) || ("undefined" !== typeof $.fn.popover)) {
            document.addEventListener('keydown', function(e) {
                if ('Escape' === e.key) {
                    const $openTooltips = $('.tooltip');
                    const $openPopovers = $('.popover');

                    if ($openPopovers.length || $openTooltips.length) {
                        e.stopPropagation();
                        $openTooltips.tooltip('hide');
                        $openPopovers.popover('hide');
                    }
                }
            }, true);
        }
    });
};

$(document).listenEscKeyToCloseOverlays();