Meeting Dismissible Requirement of WCAG 2.1 - SC 1.4.13 for Tooltips

Question

I am trying to meet accessibility issues of WCAG 2.1 - SC 1.4.13, content on hover or focus, specifically on the dismissible section with Bootstrap 3.3 tooltips. It specifies that a tooltip should be able to be closed easily without the trigger losing focus or hover. I want to allow a user to close the tooltip using the escape key (as recommended to me). I have been able to accomplish this with the focus part (keyboard tabbing to the trigger and pressing escape) via javascript. But when I try the same with hover (mousing over the trigger and pressing escape) the tooltip doesn't go away. You can see Example 1 from the linked page above for what I am trying to accomplish. Has anyone encountered this before? Thanks in advance!

Here is the code I am using:

$(document).ready(function() {
    $('[data-toggle="tooltip"]').on('shown.bs.tooltip', function() {
        var me = this;
        console.log('shown');
        $(this).keyup(function(e) {
            console.log('key up');
            // Escape key
            if (e.key === 'Escape') {
                console.log('hide');
                $(me).tooltip('hide');
            }
        });
    });
});

Answer 1

This is what I ended up doing and it works okay, but would like something a bit less hacky.

$(document).ready(function() {
    $('[data-toggle="tooltip"]').on('shown.bs.tooltip', function() {
        var me = this;
        $(document).one('keyup', function(e) {
            // Escape key
            if (e.key === 'Escape') {
                $(me).tooltip('hide');
            }
        });
    });
});