# Hover Card URL: https://ark-ui.com/docs/components/hover-card Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/hover-card.mdx A card that appears when a user hovers over an element. --- ## Anatomy ```tsx ``` ## Examples **Example: basic** #### React ```tsx import { HoverCard } from '@ark-ui/react/hover-card' import { Portal } from '@ark-ui/react/portal' import styles from 'styles/hover-card.module.css' export const Basic = () => (

Liked by{' '} @sarah_chen {' '} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc. Building beautiful interfaces and design systems.

2,456 Following
14.5K Followers
) ``` #### Solid ```tsx import { HoverCard } from '@ark-ui/solid/hover-card' import { Portal } from 'solid-js/web' import styles from 'styles/hover-card.module.css' export const Basic = () => (

Liked by{' '} ( @sarah_chen )} />{' '} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc. Building beautiful interfaces and design systems.

2,456 Following
14.5K Followers
) ``` #### Vue ```vue ``` #### Svelte ```svelte

Liked by {#snippet asChild(props)} @sarah_chen {/snippet} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc. Building beautiful interfaces and design systems.

2,456 Following
14.5K Followers
``` ### Controlled The controlled `HoverCard` component provides an interface for managing the state of the hover card using the `open` and `onOpenChange` props: **Example: controlled** #### React ```tsx import { HoverCard } from '@ark-ui/react/hover-card' import { Portal } from '@ark-ui/react/portal' import { useState } from 'react' import button from 'styles/button.module.css' import styles from 'styles/hover-card.module.css' export const Controlled = () => { const [open, setOpen] = useState(false) return (
setOpen(e.open)}>

Liked by{' '} @sarah_chen {' '} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

) } ``` #### Solid ```tsx import { HoverCard } from '@ark-ui/solid/hover-card' import { createSignal } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/hover-card.module.css' export const Controlled = () => { const [open, setOpen] = createSignal(false) return (
setOpen(e.open)}>

Liked by{' '} ( @sarah_chen )} />{' '} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

) } ``` #### Vue ```vue ``` #### Svelte ```svelte

Liked by {#snippet asChild(props)} @sarah_chen {/snippet} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

``` ### Root Provider An alternative way to control the hover card is to use the `RootProvider` component and the `useHoverCard` hook. This way you can access the state and methods from outside the component. **Example: root-provider** #### React ```tsx import { HoverCard, useHoverCard } from '@ark-ui/react/hover-card' import { Portal } from '@ark-ui/react/portal' import styles from 'styles/hover-card.module.css' export const RootProvider = () => { const hoverCard = useHoverCard() return (
Open: {String(hoverCard.open)}

Liked by{' '} @sarah_chen {' '} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

) } ``` #### Solid ```tsx import { HoverCard, useHoverCard } from '@ark-ui/solid/hover-card' import { Portal } from 'solid-js/web' import styles from 'styles/hover-card.module.css' export const RootProvider = () => { const hoverCard = useHoverCard() return (
Open: {String(hoverCard().open)}

Liked by{' '} ( @sarah_chen )} />{' '} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

) } ``` #### Vue ```vue ``` #### Svelte ```svelte
Open: {String(hoverCard().open)}

Liked by {#snippet asChild(props)} @sarah_chen {/snippet} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

``` ### Delay Control the open and close delay of the hover card using the `openDelay` and `closeDelay` props: **Example: delay** #### React ```tsx import { HoverCard } from '@ark-ui/react/hover-card' import { Portal } from '@ark-ui/react/portal' import styles from 'styles/hover-card.module.css' export const Delay = () => (

Liked by{' '} @sarah_chen {' '} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

) ``` #### Solid ```tsx import { HoverCard } from '@ark-ui/solid/hover-card' import { Portal } from 'solid-js/web' import styles from 'styles/hover-card.module.css' export const Delay = () => (

Liked by{' '} ( @sarah_chen )} />{' '} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

) ``` #### Vue ```vue ``` #### Svelte ```svelte

Liked by {#snippet asChild(props)} @sarah_chen {/snippet} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

``` ### Positioning The `HoverCard` component can be customized in its placement and distance from the trigger element through the `positioning` prop: **Example: positioning** #### React ```tsx import { HoverCard } from '@ark-ui/react/hover-card' import { Portal } from '@ark-ui/react/portal' import styles from 'styles/hover-card.module.css' export const Positioning = () => (

Liked by{' '} @sarah_chen {' '} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

) ``` #### Solid ```tsx import { HoverCard } from '@ark-ui/solid/hover-card' import { Portal } from 'solid-js/web' import styles from 'styles/hover-card.module.css' export const Positioning = () => (

Liked by{' '} ( @sarah_chen )} />{' '} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

) ``` #### Vue ```vue ``` #### Svelte ```svelte

Liked by {#snippet asChild(props)} @sarah_chen {/snippet} and 3 others

Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

``` ### Context Use the `Context` component to access the hover card's state and methods from within the component tree: **Example: context** #### React ```tsx import { HoverCard } from '@ark-ui/react/hover-card' import { Portal } from '@ark-ui/react/portal' import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react' import styles from 'styles/hover-card.module.css' export const Context = () => ( {(context) => (

Liked by{' '} @sarah_chen {context.open ? : } {' '} and 3 others

)}
Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

) ``` #### Solid ```tsx import { HoverCard } from '@ark-ui/solid/hover-card' import { ChevronDownIcon, ChevronUpIcon } from 'lucide-solid' import { Portal } from 'solid-js/web' import styles from 'styles/hover-card.module.css' export const Context = () => ( {(context) => (

Liked by{' '} ( @sarah_chen {context().open ? : } )} />{' '} and 3 others

)}
Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

) ``` #### Vue ```vue ``` #### Svelte ```svelte {#snippet render(context)}

Liked by {#snippet asChild(props)} @sarah_chen {#if context().open} {:else} {/if} {/snippet} and 3 others

{/snippet}
Sarah Chen

Sarah Chen

@sarah_chen

Design Engineer at Acme Inc.

``` ## API Reference ### Props **Component API Reference** #### React **Root Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `closeDelay` | `number` | No | The duration from when the mouse leaves the trigger or content until the hover card closes. | | `defaultOpen` | `boolean` | No | The initial open state of the hover card when rendered. Use when you don't need to control the open state of the hover card. | | `disabled` | `boolean` | No | Whether the hover card is disabled | | `id` | `string` | No | The unique identifier of the machine. | | `ids` | `Partial<{ trigger: string; content: string; positioner: string; arrow: string }>` | No | The ids of the elements in the popover. Useful for composition. | | `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame | | `lazyMount` | `boolean` | No | Whether to enable lazy mounting | | `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state | | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | No | Function called when the focus is moved outside the component | | `onInteractOutside` | `(event: InteractOutsideEvent) => void` | No | Function called when an interaction happens outside the component | | `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Function called when the hover card opens or closes. | | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | No | Function called when the pointer is pressed down outside the component | | `open` | `boolean` | No | The controlled open state of the hover card | | `openDelay` | `number` | No | The duration from when the mouse enters the trigger until the hover card opens. | | `positioning` | `PositioningOptions` | No | The user provided options used to position the popover content | | `present` | `boolean` | No | Whether the node is present (controlled by the user) | | `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. | | `unmountOnExit` | `boolean` | No | Whether to unmount on exit. | **Arrow Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Arrow CSS Variables:** | Variable | Description | |----------|-------------| | `--arrow-size` | The size of the arrow | | `--arrow-size-half` | Half the size of the arrow | | `--arrow-background` | Use this variable to style the arrow background | | `--arrow-offset` | The offset position of the arrow | **ArrowTip Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Content Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Content Data Attributes:** | Attribute | Value | |-----------|-------| | `[data-scope]` | hover-card | | `[data-part]` | content | | `[data-state]` | "open" | "closed" | | `[data-nested]` | popover | | `[data-has-nested]` | popover | | `[data-placement]` | The placement of the content | **Content CSS Variables:** | Variable | Description | |----------|-------------| | `--layer-index` | The index of the dismissable in the layer stack | | `--nested-layer-count` | The number of nested hover-cards | **Positioner Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Positioner CSS Variables:** | Variable | Description | |----------|-------------| | `--reference-width` | The width of the reference element | | `--reference-height` | The height of the root | | `--available-width` | The available width in viewport | | `--available-height` | The available height in viewport | | `--x` | The x position for transform | | `--y` | The y position for transform | | `--z-index` | The z-index value | | `--transform-origin` | The transform origin for animations | **RootProvider Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `value` | `UseHoverCardReturn` | Yes | | | `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame | | `lazyMount` | `boolean` | No | Whether to enable lazy mounting | | `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state | | `present` | `boolean` | No | Whether the node is present (controlled by the user) | | `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. | | `unmountOnExit` | `boolean` | No | Whether to unmount on exit. | **Trigger Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Trigger Data Attributes:** | Attribute | Value | |-----------|-------| | `[data-scope]` | hover-card | | `[data-part]` | trigger | | `[data-placement]` | The placement of the trigger | | `[data-state]` | "open" | "closed" | #### Solid **Root Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `closeDelay` | `number` | No | The duration from when the mouse leaves the trigger or content until the hover card closes. | | `defaultOpen` | `boolean` | No | The initial open state of the hover card when rendered. Use when you don't need to control the open state of the hover card. | | `disabled` | `boolean` | No | Whether the hover card is disabled | | `id` | `string` | No | The unique identifier of the machine. | | `ids` | `Partial<{ trigger: string; content: string; positioner: string; arrow: string }>` | No | The ids of the elements in the popover. Useful for composition. | | `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame | | `lazyMount` | `boolean` | No | Whether to enable lazy mounting | | `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state | | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | No | Function called when the focus is moved outside the component | | `onInteractOutside` | `(event: InteractOutsideEvent) => void` | No | Function called when an interaction happens outside the component | | `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Function called when the hover card opens or closes. | | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | No | Function called when the pointer is pressed down outside the component | | `open` | `boolean` | No | The controlled open state of the hover card | | `openDelay` | `number` | No | The duration from when the mouse enters the trigger until the hover card opens. | | `positioning` | `PositioningOptions` | No | The user provided options used to position the popover content | | `present` | `boolean` | No | Whether the node is present (controlled by the user) | | `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. | | `unmountOnExit` | `boolean` | No | Whether to unmount on exit. | **Arrow Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Arrow CSS Variables:** | Variable | Description | |----------|-------------| | `--arrow-size` | The size of the arrow | | `--arrow-size-half` | Half the size of the arrow | | `--arrow-background` | Use this variable to style the arrow background | | `--arrow-offset` | The offset position of the arrow | **ArrowTip Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Content Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Content Data Attributes:** | Attribute | Value | |-----------|-------| | `[data-scope]` | hover-card | | `[data-part]` | content | | `[data-state]` | "open" | "closed" | | `[data-nested]` | popover | | `[data-has-nested]` | popover | | `[data-placement]` | The placement of the content | **Content CSS Variables:** | Variable | Description | |----------|-------------| | `--layer-index` | The index of the dismissable in the layer stack | | `--nested-layer-count` | The number of nested hover-cards | **Positioner Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Positioner CSS Variables:** | Variable | Description | |----------|-------------| | `--reference-width` | The width of the reference element | | `--reference-height` | The height of the root | | `--available-width` | The available width in viewport | | `--available-height` | The available height in viewport | | `--x` | The x position for transform | | `--y` | The y position for transform | | `--z-index` | The z-index value | | `--transform-origin` | The transform origin for animations | **RootProvider Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `value` | `UseHoverCardReturn` | Yes | | | `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame | | `lazyMount` | `boolean` | No | Whether to enable lazy mounting | | `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state | | `present` | `boolean` | No | Whether the node is present (controlled by the user) | | `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. | | `unmountOnExit` | `boolean` | No | Whether to unmount on exit. | **Trigger Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Trigger Data Attributes:** | Attribute | Value | |-----------|-------| | `[data-scope]` | hover-card | | `[data-part]` | trigger | | `[data-placement]` | The placement of the trigger | | `[data-state]` | "open" | "closed" | #### Vue **Root Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `closeDelay` | `number` | No | The duration from when the mouse leaves the trigger or content until the hover card closes. | | `defaultOpen` | `boolean` | No | The initial open state of the hover card when rendered. Use when you don't need to control the open state of the hover card. | | `disabled` | `boolean` | No | Whether the hover card is disabled | | `id` | `string` | No | The unique identifier of the machine. | | `ids` | `Partial<{ trigger: string; content: string; positioner: string; arrow: string }>` | No | The ids of the elements in the popover. Useful for composition. | | `lazyMount` | `boolean` | No | Whether to enable lazy mounting | | `open` | `boolean` | No | The controlled open state of the hover card | | `openDelay` | `number` | No | The duration from when the mouse enters the trigger until the hover card opens. | | `positioning` | `PositioningOptions` | No | The user provided options used to position the popover content | | `unmountOnExit` | `boolean` | No | Whether to unmount on exit. | **Arrow Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Arrow CSS Variables:** | Variable | Description | |----------|-------------| | `--arrow-size` | The size of the arrow | | `--arrow-size-half` | Half the size of the arrow | | `--arrow-background` | Use this variable to style the arrow background | | `--arrow-offset` | The offset position of the arrow | **ArrowTip Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Content Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Content Data Attributes:** | Attribute | Value | |-----------|-------| | `[data-scope]` | hover-card | | `[data-part]` | content | | `[data-state]` | "open" | "closed" | | `[data-nested]` | popover | | `[data-has-nested]` | popover | | `[data-placement]` | The placement of the content | **Content CSS Variables:** | Variable | Description | |----------|-------------| | `--layer-index` | The index of the dismissable in the layer stack | | `--nested-layer-count` | The number of nested hover-cards | **Positioner Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Positioner CSS Variables:** | Variable | Description | |----------|-------------| | `--reference-width` | The width of the reference element | | `--reference-height` | The height of the root | | `--available-width` | The available width in viewport | | `--available-height` | The available height in viewport | | `--x` | The x position for transform | | `--y` | The y position for transform | | `--z-index` | The z-index value | | `--transform-origin` | The transform origin for animations | **RootProvider Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `value` | `HoverCardApi` | Yes | | | `lazyMount` | `boolean` | No | Whether to enable lazy mounting | | `unmountOnExit` | `boolean` | No | Whether to unmount on exit. | **Trigger Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. | **Trigger Data Attributes:** | Attribute | Value | |-----------|-------| | `[data-scope]` | hover-card | | `[data-part]` | trigger | | `[data-placement]` | The placement of the trigger | | `[data-state]` | "open" | "closed" | #### Svelte **Root Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `closeDelay` | `number` | No | The duration from when the mouse leaves the trigger or content until the hover card closes. | | `defaultOpen` | `boolean` | No | The initial open state of the hover card when rendered. Use when you don't need to control the open state of the hover card. | | `disabled` | `boolean` | No | Whether the hover card is disabled | | `id` | `string` | No | The unique identifier of the machine. | | `ids` | `Partial<{ trigger: string; content: string; positioner: string; arrow: string }>` | No | The ids of the elements in the popover. Useful for composition. | | `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame | | `lazyMount` | `boolean` | No | Whether to enable lazy mounting | | `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state | | `onFocusOutside` | `(event: FocusOutsideEvent) => void` | No | Function called when the focus is moved outside the component | | `onInteractOutside` | `(event: InteractOutsideEvent) => void` | No | Function called when an interaction happens outside the component | | `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Function called when the hover card opens or closes. | | `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | No | Function called when the pointer is pressed down outside the component | | `open` | `boolean` | No | The controlled open state of the hover card | | `openDelay` | `number` | No | The duration from when the mouse enters the trigger until the hover card opens. | | `positioning` | `PositioningOptions` | No | The user provided options used to position the popover content | | `present` | `boolean` | No | Whether the node is present (controlled by the user) | | `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. | | `unmountOnExit` | `boolean` | No | Whether to unmount on exit. | **Arrow Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. | | `ref` | `Element` | No | | **Arrow CSS Variables:** | Variable | Description | |----------|-------------| | `--arrow-size` | The size of the arrow | | `--arrow-size-half` | Half the size of the arrow | | `--arrow-background` | Use this variable to style the arrow background | | `--arrow-offset` | The offset position of the arrow | **ArrowTip Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. | | `ref` | `Element` | No | | **Content Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. | | `ref` | `Element` | No | | **Content Data Attributes:** | Attribute | Value | |-----------|-------| | `[data-scope]` | hover-card | | `[data-part]` | content | | `[data-state]` | "open" | "closed" | | `[data-nested]` | popover | | `[data-has-nested]` | popover | | `[data-placement]` | The placement of the content | **Content CSS Variables:** | Variable | Description | |----------|-------------| | `--layer-index` | The index of the dismissable in the layer stack | | `--nested-layer-count` | The number of nested hover-cards | **Context Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `render` | `Snippet<[UseHoverCardContext]>` | Yes | | **Positioner Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. | | `ref` | `Element` | No | | **Positioner CSS Variables:** | Variable | Description | |----------|-------------| | `--reference-width` | The width of the reference element | | `--reference-height` | The height of the root | | `--available-width` | The available width in viewport | | `--available-height` | The available height in viewport | | `--x` | The x position for transform | | `--y` | The y position for transform | | `--z-index` | The z-index value | | `--transform-origin` | The transform origin for animations | **RootProvider Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `value` | `UseHoverCardReturn` | Yes | | | `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame | | `lazyMount` | `boolean` | No | Whether to enable lazy mounting | | `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state | | `present` | `boolean` | No | Whether the node is present (controlled by the user) | | `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. | | `unmountOnExit` | `boolean` | No | Whether to unmount on exit. | **Trigger Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. | | `ref` | `Element` | No | | **Trigger Data Attributes:** | Attribute | Value | |-----------|-------| | `[data-scope]` | hover-card | | `[data-part]` | trigger | | `[data-placement]` | The placement of the trigger | | `[data-state]` | "open" | "closed" | ### Context **API:** | Property | Type | Description | |----------|------|-------------| | `open` | `boolean` | Whether the hover card is open | | `setOpen` | `(open: boolean) => void` | Function to open the hover card | | `reposition` | `(options?: Partial) => void` | Function to reposition the popover |