# HoverCard

A contextual preview on hover or focus.

## How to use it

The content is supplementary: essential information must also be available at the linked destination.



## Import


```tsx
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<HoverCard><HoverCardTrigger asChild><a href="/docs" style={{color:"var(--color-primary)"}}>@kivora</a></HoverCardTrigger><HoverCardContent>Components for the web and your next big idea.</HoverCardContent></HoverCard>
```


## API: HoverCard


```typescript
declare function HoverCard({ closeDelay, defaultOpen, open, onOpenChange, openDelay, ...props }: HoverCardProps): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| children | ReactNode | No | Content or child elements of the component. |
| closeDelay | number | No | See the published type. |
| defaultOpen | boolean | No | Whether it starts open in uncontrolled mode. |
| onOpenChange | ((open: boolean) => void) | No | Receives the new open state. |
| open | boolean | No | Controlled open state. |
| openDelay | number | No | See the published type. |

## API: HoverCardTrigger


```typescript
HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLAnchorElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLAnchorElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLAnchorElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| type | string | No | Operation type or mode; values depend on the component. |

## API: HoverCardContent


```typescript
HoverCardContent: React.ForwardRefExoticComponent<HoverCardContentProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| align | "center" \| "start" \| "end" | No | Content alignment. |
| alignOffset | number | No | Offset from the chosen alignment. |
| aria-label | string | No | Accessible name of the control. |
| arrowPadding | number | No | See the published type. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| avoidCollisions | boolean | No | See the published type. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| collisionBoundary | Boundary \| Boundary[] | No | See the published type. |
| collisionPadding | number \| Partial<Record<"left" \| "right" \| "top" \| "bottom", number>> | No | See the published type. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| forceMount | true | No | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| hideWhenDetached | boolean | No | See the published type. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onEscapeKeyDown | ((event: KeyboardEvent) => void) | No | Event handler called when the escape key is down. Can be prevented. |
| onFocusOutside | ((event: FocusOutsideEvent) => void) | No | Event handler called when the focus moves outside of the `HoverCard`. Can be prevented. |
| onInteractOutside | ((event: PointerDownOutsideEvent \| FocusOutsideEvent) => void) | No | Event handler called when an interaction happens outside the `HoverCard`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. |
| onPointerDownOutside | ((event: PointerDownOutsideEvent) => void) | No | Event handler called when the a `pointerdown` event happens outside of the `HoverCard`. Can be prevented. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| side | "left" \| "right" \| "top" \| "bottom" | No | Side from which the panel appears. |
| sideOffset | number | No | Distance between the trigger and content. |
| sticky | "partial" \| "always" | No | See the published type. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| updatePositionStrategy | "always" \| "optimized" | No | See the published type. |

Source: https://kivora.pro/docs/componentes/hover-card