# Hover card

A preview that hangs from a link when the pointer rests on it or the keyboard reaches it. The popover’s card and leader, opened by a short delay and put away by leaving.

Kit part · With the Kit · https://tactileui.dev/parts/hover-card

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

One card is out at a time.

## Variants

- A person
- A page · a title and a line
- Above, when the page runs out
- Live · a key as the trigger

## States

- Trigger at rest
- Pointer resting
- Keyboard focus
- Card out below
- Card out above

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-hover-card | attribute | On the trigger (a link or a key): the card that hangs from it. The card is a block, so put it beside the trigger, never inside a paragraph. |
| aria-describedby | attribute | On the trigger, so the card is read as its description when it gains focus. |
| data-side · data-align | attribute | On the card: where it prefers to hang, and along which edge. It flips when the page runs out. |
| data-open-delay · data-close-delay | attribute | On the trigger. |
| showHoverCard(trigger) · hideHoverCard() | function | Open one now, and put the open one away. |
| HOVER_OPEN_MS · HOVER_FOCUS_MS · HOVER_CLOSE_MS | constant | The timings. |
| Focus · Escape | keyboard | A keyboard-visible focus opens it; Escape closes it and focus stays on the trigger. |
| Tab | keyboard | From the trigger goes into the card, which follows it in the source, if it has anything focusable. |

## Usage notes

Rest the pointer on a name for half a second, or Tab to it. Move onto the card to read it; Escape puts it away.

## Accessibility

- 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.
- 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.

## Related parts

- [Popover](https://tactileui.dev/parts/popover): A card hung from the key that opened it, with a printed leader running back to the key. Not modal: the page stays live around it.
- [Profile card](https://tactileui.dev/parts/profile-card): A person’s ID plate: their coin set in a countersunk socket, name and role, a rating plate of facts engraved in tabular figures, and one key to act. Compact for one line.
- [Tooltip](https://tactileui.dev/parts/tooltip): A few words on a small label plate, the kind riveted beside a control on a rack: printed in the contrast colours with a rule just inside its edge and a short tab aimed at its key. It comes up when a pointer rests on the key or the keyboard reaches it, is read by a screen reader, and goes on Escape.