Hover card

A hover card previews where a link goes, such as a person or an article, when the link is hovered or gets keyboard focus.

Add hover-card-trigger to an <a href> and point its aria-details at the card, a popover with popover="hint". AutoInit() starts every .hover-card-trigger. The card looks like a popover and sits below the link with their start edges aligned, flipped to the other side when it would not fit.

Written by Ada Lovelace.

<p>Written by <a class="hover-card-trigger" href="/people/ada"
                 aria-details="ada-card">Ada Lovelace</a>.</p>
<div id="ada-card" class="popover" popover="hint">
  <h3>Ada Lovelace</h3>
  <p>Mathematician. Wrote the first published program, for the Analytical Engine.</p>
  <p><a href="/people/ada/articles">All articles by Ada</a></p>
</div>

When it shows and hides

The card shows once the pointer or keyboard focus has rested on the link for enterDelay, 500 ms by default, so a pointer that only passes over the link shows nothing. It stays while the pointer is on the link or the card, and while focus is on either. When both are left, it hides after exitDelay, 300 ms by default, which is time enough for a pointer to cross the gap to the card.

Focus stays on the link when the card shows, and Tab moves into the card's links and buttons. Escape hides the card and takes focus in it back to the link. A click elsewhere hides it too. One hint card shows at a time, and a hover card leaves an open menu or popover alone. Several links can name the same card, such as a name mentioned twice, and the card shows against whichever link showed it last.

Touch and clicks

A tap or click follows the link and shows no card, so the linked page has to hold the same content for touch screens. Keep the card a short preview, and put anything to act on in the page, a popover opened by a button or a dialog. Do not also give the link interestfor, which Chromium would handle on its own as well.

Accessibility

aria-details tells a screen reader that the link has more detail and lets it move there. Screen readers support it unevenly, and a hidden card is not in the reading order at all, which is another reason the linked page must hold the same content. Leave the role off the card: it can hold links, which a tooltip cannot.

Options and methods

enterDelay and exitDelay take milliseconds, from script or from data-hover-card-options. The link fires expressive:open and expressive:close when the card shows and hides, also when the browser hides it.

<a class="hover-card-trigger" href="/people/ada" aria-details="ada-card"
   data-hover-card-options='{"enterDelay":300,"exitDelay":200}'>Ada Lovelace</a>
<div id="ada-card" class="popover" popover="hint">…</div>

const card = Expressive.HoverCard.getInstance(document.querySelector('.hover-card-trigger'));
card.open();    // shows the card now, without enterDelay
card.close();   // hides it now, without exitDelay
card.destroy(); // hides a card it showed and removes the listeners