# components/floating/HoverCard (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/floating/HoverCard.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/floating/HoverCard.tsx).

## Components

### `HoverCard`

Component.

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.

```ts
function HoverCard(props: HoverCardProps): Element
```

**Parameters**

- `props` (`HoverCardProps`): Component props.

**Returns** `Element`

**Props**

- `align?` (`Align`, default `'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). `null`: the trigger.
- `ariaLabel` (`string`): Accessible name of the card, which has the `dialog` role.
- `children` (`ReactNode`): The card's content.
- `side?` (`Side`, default `'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; `open` is whether the card is
  shown.
- `width?` (`number`): Fixed width of the card in px. Sized by its content when omitted.

Source: [ui/src/components/floating/HoverCard.tsx:72](https://github.com/Tahul/zidane/blob/main/ui/src/components/floating/HoverCard.tsx#L72)

## Interfaces

### `HoverCardProps`

Interface.

Props for [`HoverCard`](https://zidane.si/docs/reference/ui-components-floating-hover-card.md#HoverCard).

```ts
interface HoverCardProps
```

**Properties**

- `align?` (`Align`, default `'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). `null`: the trigger.
- `ariaLabel` (`string`): Accessible name of the card, which has the `dialog` role.
- `children` (`ReactNode`): The card's content.
- `side?` (`Side`, default `'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; `open` is whether the card is
  shown.
- `width?` (`number`): Fixed width of the card in px. Sized by its content when omitted.

Source: [ui/src/components/floating/HoverCard.tsx:32](https://github.com/Tahul/zidane/blob/main/ui/src/components/floating/HoverCard.tsx#L32)

### `HoverCardTriggerProps`

Interface.

Props [`HoverCard`](https://zidane.si/docs/reference/ui-components-floating-hover-card.md#HoverCard) passes to its `trigger` function, to spread onto the trigger element.

```ts
interface HoverCardTriggerProps
```

**Properties**

- `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.

Source: [ui/src/components/floating/HoverCard.tsx:18](https://github.com/Tahul/zidane/blob/main/ui/src/components/floating/HoverCard.tsx#L18)