Mushilu-San UI Hover card
A preview card that appears after a short hover over a link or name.
Selector: mui-hover-card
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@mushilu-san/ui/overlays';Loading example…
Overview
mui-hover-card-content preview when the pointer rests on a muiHoverCardTrigger. openDelay and closeDelay set how long to wait, in milliseconds, so the card does not flicker.
role="tooltip", and the trigger is linked to it while it is open. It is for a preview; the trigger is still a normal link.
Guidelines
Do
Keep the trigger a real link, so the page works without the preview. Put the same information on the linked page.
Don't
Do not put forms or buttons inside a hover card.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
content | tooltip | |
trigger | — |
Keyboard
| Keys | Action |
|---|---|
| Focus | |
| Escape |
Hover cards are not reachable by touch. The linked page must hold the same information.
API
HoverCard
| Name | Type | Default | Description |
|---|---|---|---|
placement | 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left' | 'right' | 'top' | 'bottom' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'bottom' | Side of the trigger the card opens on. Default `bottom`. |
openDelay | number | 700 | Milliseconds to wait after the pointer arrives before opening. Default `700`. |
closeDelay | number | 300 | Milliseconds to wait after the pointer leaves before closing. Default `300`. |
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Whether the card is open. Two-way bindable with `[(open)]`. |
| Name | Type | Description |
|---|---|---|
opened | void | Emits when the card opens. |
closed | void | Emits when the card closes. |
CSS parts
::part(root)
HoverCardTrigger
CSS parts
::part(trigger)
HoverCardContent
CSS parts
::part(content)::part(panel)
Tokens
--mui-color-surface-raised--mui-color-border--mui-shadow-3--mui-radius-md