Hover card
A delayed preview card for a link.
<mm-hover-card>
<a slot="trigger" href="/assets/mrn://postgresql/table/shop.public.orders_daily">orders_daily</a>
<mm-asset-card name="orders_daily" provider="postgresql" type="Table" rows="1284019"
mrn="mrn://postgresql/table/shop.public.orders_daily" owners="Analytics Engineering" tags="pii, certified"
updated="2026-10-27T04:12:00Z"></mm-asset-card>
</mm-hover-card>
Guidance
Hover cards preview what a link points to (an asset, a person, an agent) without leaving the
page, so people scanning a lineage list or an audit log can check an owner or a row count in
place. Put mm-asset-card or mm-person-card inside, or any short read-only content.
The card appears 300ms after the pointer rests on the trigger or the trigger receives focus, not instantly: moving the pointer across a dense table, or tabbing along a row of links, would otherwise flash a card for every item passed over. It hides 150ms after both the pointer and focus have left the trigger and the card, so the pointer can travel into the card. Touch input doesn't open it. Escape hides it. It leaves focus where it is: the content follows the trigger in the tab order while it is showing, and the trigger keeps its own name and destination, so the card is never the only way to reach information. Shown from the keyboard, it appears without a transition once the delay has passed.
Wrap the trigger (usually a link) in the trigger slot, or point for at its id.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
htmlFor | for | string | '' | The id of the trigger, in the same document or shadow root. |
placement | placement | Placement | 'bottom-start' | Floating UI placement against the trigger. |
openDelay | open-delay | number | 300 | Delay before showing, in milliseconds. |
closeDelay | close-delay | number | 150 | Delay before hiding once pointer and focus have left, in milliseconds. |
open | open | boolean | false | Whether the card is showing. Reflects. |
trigger | HTMLElement | null | The element the card previews. |
Methods
| Method | Description |
|---|---|
show() | Shows the card now, without the delay. |
hide() | Hides the card now. |
Events
| Event | Detail | Description |
|---|---|---|
mm-toggle | CustomEvent<PopoverToggleDetail> | The card was shown or hidden. |
Slots
| Slot | Description |
|---|---|
| Default | The card content, such as mm-asset-card or mm-person-card. |
trigger | The link or button the card previews. |
CSS parts
| Part | Description |
|---|---|
panel | The floating panel. |
CSS custom properties
| Property | Description |
|---|---|
--mm-popover-padding | Panel padding. Defaults to --space-4. |
--mm-popover-max-width | Maximum width. Defaults to 360px. |
Examples
Every state of mm-hover-card in Storybook, with keyboard and screen reader tests.