title: Meeting Dismissible Requirement of WCAG 2.1 - SC 1.4.13 for Tooltips
body: <p>I am trying to meet accessibility issues of <a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html" rel="nofollow noreferrer">WCAG 2.1 - SC 1.4.13, content on hover or focus</a>, specifically on the dismissible section with <a href="https://getbootstrap.com/docs/3.3/javascript/#tooltips" rel="nofollow noreferrer">Bootstrap 3.3 tooltips</a>. 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!</p>
  
  <p>Here is the code I am using:</p>
  
  <pre><code>$(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');
              }
          });
      });
  });
  </code></pre>