All components (204)

Hover card

Layers · HoverCard · .amset-hovercard

What it is and when to use it

A card with more information that appears when the mouse passes over a link or when it is reached with the keyboard: the profile of whoever is mentioned, a preview of a page, the summary of an order.

When to use it

To expand what a link says without taking anyone out of where they are: a mention, a reference, a product name.
When the content carries links or buttons: the card can be touched.

When not to

For a short line of help about a control: that is a Tooltip.
For what is essential: on a touch screen there is no hovering, so nothing that only the card tells should be missing outside it.
For something that has to be pressed to open and cuts the flow: that is a Dropdown or a Dialog.

Keyboard: the trigger opens the card on receiving focus, without waiting, and Tab enters it because it comes right after. Tab outwards closes it and Escape dismisses it without moving focus.

Accessibility: it meets WCAG 1.4.13: it is dismissed with Escape, the mouse can be moved over it without it disappearing (closeDelay) and it does not close by itself while in use. The trigger carries aria-expanded and aria-controls, and the card is a group named after label. With <a href> as trigger, whoever cannot open it still gets to where it points.

Fine-tuning: CSS variable --amset-hovercard-padding (the padding of the card). It goes in the top layer with popover="manual", so it does not close what is open next to it.

What it looks like

The piece is signed by @aurelia, who has been in the trade for thirty years.

<HoverCard
  label="Preview of Aurelia Jewellery"
  trigger={<a href="/aurelia">@aurelia</a>}
  openDelay={300}
  closeDelay={250}
>
  <strong>Aurelia Jewelry</strong>
  <p>Handmade designer jewellery in Madrid since 1987.</p>
</HoverCard>

Props

Import it with import { HoverCard } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	What the card shows. It is an EXTRA: what is essential has to be available outside it too.
`label`required	`string`	Name of the card for the screen reader: "Preview of Aurelia".
`trigger`required	`ReactElement<TriggerOwnProps, string \| JSXElementConstructor<any>>`	What opens it: a link or a button, always focusable. With a real `<a>`, whoever cannot hover still gets to where it points.
`align`	`Alignment`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`closeDelay`	`number`	Milliseconds of grace on leaving: it is what lets the mouse reach the card.
`defaultOpen`	`boolean`	—
`disabled`	`boolean`	—
`offset`	`number`	—
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	—
`openDelay`	`number`	Milliseconds with the mouse over it before it appears. With the keyboard it appears at once.
`side`	`FloatingSide`	—
`width`	`string`	Width of the card. Defaults to 20 rem, and never wider than the screen.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-hovercard-padding`	`var(--amset-space-4)`

How to change it

.amset-hovercard {
  --amset-hovercard-padding: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: