Hover card

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<a class="tui-link" href="/people/mara"
   data-hover-card="hc-mara" aria-describedby="hc-mara">Mara Voss</a>

<!-- Straight after its trigger, so a keyboard user can go into it -->
<div class="tui-popover tui-hover-card" id="hc-mara" popover="manual" role="note"
     data-side="bottom" data-align="center">
  <div class="tui-hover-card__who">
    <span class="tui-avatar" role="img" aria-label="Mara Voss">…</span>
    <div><p class="tui-hover-card__name">Mara Voss</p>
         <p class="tui-hover-card__role">Product designer · Lode</p></div>
  </div>
  <p class="tui-hover-card__text">Draws the hub’s panels and its printed legends.</p>
  <dl class="tui-hover-card__facts">…</dl>
</div>

import { showHoverCard, hideHoverCard } from '/kit/kit.mjs';

// Nothing to write: import kit.mjs and every [data-hover-card] works, now and later.
// Timing, per trigger: data-open-delay="450" data-close-delay="200" (milliseconds)

showHoverCard(trigger);   // open one yourself
hideHoverCard();          // and put it away

Needs kit.css and kit.mjs. How to install the kit.

• It meets the three tests for content that appears on hover: it can be dismissed (Escape, without moving focus), hovered (moving onto it keeps it open) and persistent (it stays until you leave).
• Focus opens it as hover does, and only keyboard-visible focus counts, so clicking with a mouse does not pop it.
• The trigger points at the card with aria-describedby, so a screen reader reads the card as the link’s description; the card is role="note" and holds words, not controls.
• Nothing lives only in the card. It repeats what the link’s page says; on a touch screen, which cannot hover, a tap simply follows the link.
• With reduced motion the card appears without its small drop.

The card is the popover’s (its plate, its 12px corners, its leader running to the trigger) set with popover="manual" so the browser puts it in the top layer without any light-dismiss of its own. hover-card.mjs owns the timing: a rest of 450ms opens it, and leaving starts a 200ms grace that crossing to the card cancels, so the gap of the leader can be walked. placePopover, the popover’s own arithmetic, chooses the side and slides it to stay inside the window; it follows scrolling and resizing. One card is out at a time.