Tooltip

<!--
  Read the listeners before the CSS. There are FOUR of them, in two pairs:

    mouseenter / mouseleave   the mouse user
    focus     / blur          everyone else

  A tooltip bound to hover alone is invisible to a keyboard user, and hover
  cannot be produced by a touch screen at all. The focus pair is not an
  enhancement; it is half the component. This is why a CSS :hover-only tooltip
  is a bug however elegant it looks.

  aria-describedby is what makes the text reach a screen reader. Without it the
  tooltip is a floating div that happens to be near a button, semantically
  unrelated to it. The tooltip's own role="tooltip" gives it the right
  announcement; the id link is what gets it announced at all.

  Escape dismisses it even while hovered - per APG, a tooltip covering the thing
  you are trying to read must be dismissable without moving the pointer.
-->
<span class="tip">
  <button class="tip__trigger" type="button" aria-describedby="tip-1">
    Retention
  </button>
  <span class="tip__bubble" id="tip-1" role="tooltip">
    Deleted items are recoverable for 30 days.
  </span>
</span>

<script>
  document.querySelectorAll('.tip').forEach(function (root) {
    var trigger = root.querySelector('.tip__trigger');
    var bubble = root.querySelector('.tip__bubble');
    var timer = null;

    function show() {
      // A short delay keeps the tooltip from strobing as the pointer crosses a
      // row of controls on its way somewhere else.
      timer = window.setTimeout(function () {
        bubble.classList.add('tip__bubble--in');
      }, 150);
    }

    function hide() {
      window.clearTimeout(timer);
      bubble.classList.remove('tip__bubble--in');
    }

    // Pointer.
    trigger.addEventListener('mouseenter', show);
    trigger.addEventListener('mouseleave', hide);
    // Keyboard. Same handlers - the tooltip cannot tell how you arrived.
    trigger.addEventListener('focus', show);
    trigger.addEventListener('blur', hide);

    trigger.addEventListener('keydown', function (event) {
      if (event.key === 'Escape') hide();
    });
  });
</script>