zidanecomponents/floating/HoverCard
import { … } from 'zidane-ui'ui/src/components/floating/HoverCard.tsx
Components#
HoverCardComponent#
Renders a trigger and a card that opens while the trigger is hovered or focused. The card opens after 250 ms, so sweeping the pointer across a list opens nothing, and stays open while the pointer or focus is on it. It closes 150 ms after both leave, and Esc closes it at once.
function HoverCard(props: HoverCardProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | HoverCardProps | Component props. |
Returns
ElementProps
| Name | Type | Default | Description |
|---|---|---|---|
| align? | Align | 'start' | How the card lines up along the trigger's edge. |
| anchorTo? | (trigger: HTMLElement) => HTMLElement | null | Position against another element than the trigger (a sidebar badge's
card against its whole row, so it opens beside the list instead of over
the rows below). | |
| ariaLabel | string | Accessible name of the card, which has the | |
| children | ReactNode | The card's content. | |
| side? | Side | 'right' | Preferred side of the trigger. It flips when it does not fit. |
| testId? | string | Test id for the card element. | |
| trigger | (props: HoverCardTriggerProps, open: boolean) => ReactNode | Renders the trigger. Spread the received props onto the element; | |
| width? | number | Fixed width of the card in px. Sized by its content when omitted. |
Interfaces#
HoverCardPropsInterface#
Props for HoverCard.
interface HoverCardPropsProperties
| Name | Type | Default | Description |
|---|---|---|---|
| align? | Align | 'start' | How the card lines up along the trigger's edge. |
| anchorTo? | (trigger: HTMLElement) => HTMLElement | null | Position against another element than the trigger (a sidebar badge's
card against its whole row, so it opens beside the list instead of over
the rows below). | |
| ariaLabel | string | Accessible name of the card, which has the | |
| children | ReactNode | The card's content. | |
| side? | Side | 'right' | Preferred side of the trigger. It flips when it does not fit. |
| testId? | string | Test id for the card element. | |
| trigger | (props: HoverCardTriggerProps, open: boolean) => ReactNode | Renders the trigger. Spread the received props onto the element; | |
| width? | number | Fixed width of the card in px. Sized by its content when omitted. |
HoverCardTriggerPropsInterface#
Props HoverCard passes to its trigger function, to spread onto the trigger element.
interface HoverCardTriggerPropsProperties
| Name | Type | Description |
|---|---|---|
| onBlur? | (event: FocusEvent<HTMLElement>) => void | Starts the close delay when focus leaves the trigger, unless it moves into the card. |
| onFocus? | () => void | Optional in the type so callers that build these props themselves still compile. |
| onPointerEnter | () => void | Starts the open delay when the pointer enters the trigger. |
| onPointerLeave | () => void | Starts the close delay when the pointer leaves the trigger. |
| ref | (node: HTMLElement | null) => void | Ref callback that registers the trigger as the card's anchor. |