Hover Card
For sighted users to preview content available behind a link.
Features
- Can be controlled or uncontrolled.
- Customize side, alignment, offsets, collision handling.
- Optionally render a pointing arrow.
- Supports custom open and close delays.
- Ignored by screen readers.
Install
Import
API
Root
| Props | Type | Default |
|---|---|---|
closeDelay | number | 300 |
defaultOpen | boolean | false |
open | boolean | undefined |
openDelay | number | 700 |
| Event | Type |
|---|---|
update:open | [_value: boolean] |
Trigger
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | a |
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
Portal
| Props | Type | Default |
|---|---|---|
disabled | boolean | false |
forceMount | boolean | false |
to | string | HTMLElement | body |
Content
| Props | Type | Default |
|---|---|---|
align | 'start' | 'center' | 'end' | center |
alignOffset | number | 0 |
arrowPadding | number | 0 |
as | AsTag | Component | div |
asChild | boolean | false |
avoidCollisions | boolean | true |
collisionBoundary | Element | (Element | null)[] | null | () => [] |
collisionPadding | number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>> | 0 |
forceMount | boolean | false |
hideWhenDetached | boolean | false |
prioritizePosition | boolean | false |
side | 'top' | 'right' | 'bottom' | 'left' | bottom |
sideOffset | number | 0 |
sticky | 'partial' | 'always' | partial |
updatePositionStrategy | 'always' | 'optimized' | optimized |
| Event | Type |
|---|---|
escapeKeyDown | [_event: KeyboardEvent] |
focusOutside | [_event: FocusOutsideEvent] |
interactOutside | [_event: PointerDownOutsideEvent | FocusOutsideEvent] |
pointerDownOutside | [_event: PointerDownOutsideEvent] |
| Data attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
[data-side] | 'left' | 'right' | 'bottom' | 'top' |
[data-align] | 'start' | 'end' | 'center' |
| CSS Variable | Description |
|---|---|
--destyler-hover-card-content-transform-origin | The transform-origin computed from the content and arrow positions/offsets |
--destyler-hover-card-content-available-width | The remaining width between the trigger and the boundary edge |
--destyler-hover-card-content-available-height | The remaining height between the trigger and the boundary edge |
--destyler-hover-card-trigger-width | The width of the trigger |
--destyler-hover-card-trigger-height | The height of the trigger |
Arrow
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | svg |
asChild | boolean | false |
height | number | 5 |
width | number | 10 |