Hover Card

A card that appears when the user hovers over an element.

<script setup lang="ts">
import { HoverCard } from '@destyler-ui/vue'
</script>

<template>
  <HoverCard.Root :openDelay="0" :closeDelay="0">
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Teleport to="body">
      <HoverCard.Positioner data-testid="positioner">
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Teleport>
  </HoverCard.Root>
</template>

import { HoverCard } from '@destyler-ui/react'

export function Basic() {
  return (
    <HoverCard.Root openDelay={0} closeDelay={0}>
      <HoverCard.Trigger>Hover me</HoverCard.Trigger>
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </HoverCard.Root>
  )
}

import { HoverCard } from '@destyler-ui/solid/hover-card'
import { Portal } from 'solid-js/web'

export function Basic() {
  return (
    <HoverCard.Root>
      <HoverCard.Trigger>Hover me</HoverCard.Trigger>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content>
            <HoverCard.Arrow>
              <HoverCard.ArrowTip />
            </HoverCard.Arrow>
            Content
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}

<script lang="ts">
  import type { HoverCardRootProps } from '@destyler-ui/svelte'
  import { portal } from '@destyler-ui/svelte'
  import { HoverCard } from '@destyler-ui/svelte'
  const props: HoverCardRootProps = $props()
</script>
<HoverCard.Root openDelay={0} closeDelay={0} {...props}>
  <HoverCard.Trigger>Hover me</HoverCard.Trigger>
  <div use:portal><HoverCard.Positioner data-testid="positioner"><HoverCard.Content><HoverCard.Arrow><HoverCard.ArrowTip /></HoverCard.Arrow>Content</HoverCard.Content></HoverCard.Positioner></div>
</HoverCard.Root>

Anatomy

<script setup lang="ts">
import { HoverCard } from '@destyler-ui/vue'
</script>

<template>
  <HoverCard.Root>
    <HoverCard.Trigger />
    <HoverCard.Positioner>
      <HoverCard.Content>
        <HoverCard.Arrow>
          <HoverCard.ArrowTip />
        </HoverCard.Arrow>
      </HoverCard.Content>
    </HoverCard.Positioner>
  </HoverCard.Root>
</template>

import { HoverCard } from '@destyler-ui/react'

export default function Basic() {
  return (
    <HoverCard.Root>
      <HoverCard.Trigger />
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </HoverCard.Root>
  )
}

import { HoverCard } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <HoverCard.Root>
      <HoverCard.Trigger />
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </HoverCard.Root>
  )
}

<script lang="ts">
  import { HoverCard, portal } from '@destyler-ui/svelte'
</script>

<HoverCard.Root openDelay={0} closeDelay={0}>
  <HoverCard.Trigger>Hover me</HoverCard.Trigger>
  <div use:portal>
    <HoverCard.Positioner>
      <HoverCard.Content>
        <HoverCard.Arrow>
          <HoverCard.ArrowTip />
        </HoverCard.Arrow>
        Hover card content
      </HoverCard.Content>
    </HoverCard.Positioner>
  </div>
</HoverCard.Root>

Examples

Basic

<script setup lang="ts">
import { HoverCard } from '@destyler-ui/vue'
</script>

<template>
  <HoverCard.Root :openDelay="0" :closeDelay="0">
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Teleport to="body">
      <HoverCard.Positioner data-testid="positioner">
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Teleport>
  </HoverCard.Root>
</template>

import { HoverCard } from '@destyler-ui/react'

export function Basic() {
  return (
    <HoverCard.Root openDelay={0} closeDelay={0}>
      <HoverCard.Trigger>Hover me</HoverCard.Trigger>
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </HoverCard.Root>
  )
}

import { HoverCard } from '@destyler-ui/solid/hover-card'
import { Portal } from 'solid-js/web'

export function Basic() {
  return (
    <HoverCard.Root>
      <HoverCard.Trigger>Hover me</HoverCard.Trigger>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content>
            <HoverCard.Arrow>
              <HoverCard.ArrowTip />
            </HoverCard.Arrow>
            Content
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}

<script lang="ts">
  import type { HoverCardRootProps } from '@destyler-ui/svelte'
  import { portal } from '@destyler-ui/svelte'
  import { HoverCard } from '@destyler-ui/svelte'
  const props: HoverCardRootProps = $props()
</script>
<HoverCard.Root openDelay={0} closeDelay={0} {...props}>
  <HoverCard.Trigger>Hover me</HoverCard.Trigger>
  <div use:portal><HoverCard.Positioner data-testid="positioner"><HoverCard.Content><HoverCard.Arrow><HoverCard.ArrowTip /></HoverCard.Arrow>Content</HoverCard.Content></HoverCard.Positioner></div>
</HoverCard.Root>

Controlled

Control the open state of the hover card programmatically.

<script setup lang="ts">
import { HoverCard } from '@destyler-ui/vue'
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <button @click="() => (open = true)">Open Dialog</button>
  <HoverCard.Root v-model:open="open">
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Teleport to="body">
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Teleport>
  </HoverCard.Root>
</template>

import { useState } from 'react'
import { HoverCard } from '@destyler-ui/react'

export function Controlled() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>Open HoverCard</button>
      <HoverCard.Root open={open} onOpenChange={({ open }) => setOpen(open)}>
        <HoverCard.Trigger>Hover me</HoverCard.Trigger>
        <HoverCard.Positioner>
          <HoverCard.Content>
            <HoverCard.Arrow>
              <HoverCard.ArrowTip />
            </HoverCard.Arrow>
            Content
          </HoverCard.Content>
        </HoverCard.Positioner>
      </HoverCard.Root>
    </>
  )
}

import { HoverCard } from '@destyler-ui/solid/hover-card'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'

export function Controlled() {
  const [isOpen, setOpen] = createSignal(false)
  return (
    <>
      <button type="button" onClick={() => setOpen(!isOpen)}>
        click me
      </button>
      <HoverCard.Root open={isOpen()} onOpenChange={() => setOpen(false)}>
        <HoverCard.Trigger>Hover me</HoverCard.Trigger>
        <Portal>
          <HoverCard.Positioner>
            <HoverCard.Content>
              <HoverCard.Arrow>
                <HoverCard.ArrowTip />
              </HoverCard.Arrow>
              Content
            </HoverCard.Content>
          </HoverCard.Positioner>
        </Portal>
      </HoverCard.Root>
    </>
  )
}

<script lang="ts">
  import { HoverCard } from '@destyler-ui/svelte'
  let open = $state(false)
</script>
<button onclick={() => open = true}>Open HoverCard</button>
<HoverCard.Root bind:open>
  <HoverCard.Trigger>Hover me</HoverCard.Trigger>
  <HoverCard.Positioner><HoverCard.Content><HoverCard.Arrow><HoverCard.ArrowTip /></HoverCard.Arrow>Content</HoverCard.Content></HoverCard.Positioner>
</HoverCard.Root>

Initial Open

Open the hover card by default with defaultOpen.

<script setup lang="ts">
import { HoverCard } from '@destyler-ui/vue'
</script>

<template>
 <HoverCard.Root default-open :open-delay="0" :close-delay="0">
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Teleport to="body">
      <HoverCard.Positioner data-testid="positioner">
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Teleport>
  </HoverCard.Root>
</template>

import { HoverCard } from '@destyler-ui/react'

export function InitialOpen() {
  return (
    <HoverCard.Root defaultOpen openDelay={0} closeDelay={0}>
      <HoverCard.Trigger>Hover me</HoverCard.Trigger>
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </HoverCard.Root>
  )
}

import { HoverCard } from '@destyler-ui/solid/hover-card'
import { Portal } from 'solid-js/web'

export function InitialOpen() {
  return (
    <HoverCard.Root defaultOpen openDelay={0} closeDelay={0}>
      <HoverCard.Trigger>Hover me</HoverCard.Trigger>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content>
            <HoverCard.Arrow>
              <HoverCard.ArrowTip />
            </HoverCard.Arrow>
            Content
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}

<script lang="ts">
  import type { HoverCardRootProps } from '@destyler-ui/svelte'
  import { portal } from '@destyler-ui/svelte'
  import { HoverCard } from '@destyler-ui/svelte'
  const props: HoverCardRootProps = $props()
</script>
<HoverCard.Root {...props} defaultOpen openDelay={0} closeDelay={0}>
  <HoverCard.Trigger>Hover me</HoverCard.Trigger>
  <div use:portal><HoverCard.Positioner data-testid="positioner"><HoverCard.Content><HoverCard.Arrow><HoverCard.ArrowTip /></HoverCard.Arrow>Content</HoverCard.Content></HoverCard.Positioner></div>
</HoverCard.Root>

Positioning

Customize the hover card positioning.

<script setup lang="ts">
import { HoverCard } from '@destyler-ui/vue'
</script>

<template>
  <HoverCard.Root
    :positioning="{
      placement: 'right',
      gutter: 12,
    }"
  >
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Teleport to="body">
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Teleport>
  </HoverCard.Root>
</template>

import { HoverCard } from '@destyler-ui/react'

export function Positioning() {
  return (
    <HoverCard.Root
      positioning={{
        placement: 'right',
        gutter: 12,
      }}
    >
      <HoverCard.Trigger>Hover me</HoverCard.Trigger>
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </HoverCard.Root>
  )
}

import { HoverCard } from '@destyler-ui/solid/hover-card'
import { Portal } from 'solid-js/web'

export function Positioning() {
  return (
    <HoverCard.Root positioning={{ placement: 'right', gutter: 12 }}>
      <HoverCard.Trigger>Hover me</HoverCard.Trigger>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content>
            <HoverCard.Arrow>
              <HoverCard.ArrowTip />
            </HoverCard.Arrow>
            Content
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}

<script lang="ts">
  import { portal } from '@destyler-ui/svelte'
  import { HoverCard } from '@destyler-ui/svelte'
</script>
<HoverCard.Root positioning={{ placement: 'right', gutter: 12 }}>
  <HoverCard.Trigger>Hover me</HoverCard.Trigger>
  <div use:portal><HoverCard.Positioner><HoverCard.Content><HoverCard.Arrow><HoverCard.ArrowTip /></HoverCard.Arrow>Content</HoverCard.Content></HoverCard.Positioner></div>
</HoverCard.Root>

Render Prop

Use render prop for custom hover card rendering.

<script setup lang="ts">
import { HoverCard } from '@destyler-ui/vue'
</script>

<template>
  <HoverCard.Root>
    <HoverCard.Context v-slot="hoverCard">
      <HoverCard.Trigger>Hover me {{ hoverCard.open ? '▲' : '▼' }}</HoverCard.Trigger>
    </HoverCard.Context>
    <Teleport to="body">
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Teleport>
  </HoverCard.Root>
</template>

import { HoverCard } from '@destyler-ui/react'

export function RenderProp() {
  return (
    <HoverCard.Root>
      <HoverCard.Context>
        {hoverCard => (
          <HoverCard.Trigger>
            Hover me
            {hoverCard.open ? ' ▲' : ' ▼'}
          </HoverCard.Trigger>
        )}
      </HoverCard.Context>
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </HoverCard.Root>
  )
}

import { HoverCard } from '@destyler-ui/solid/hover-card'
import { Portal } from 'solid-js/web'

export function RenderProp() {
  return (
    <HoverCard.Root>
      <HoverCard.Context>
        {context => <HoverCard.Trigger>Hover me {context().open ? '▲' : '▼'} </HoverCard.Trigger>}
      </HoverCard.Context>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content>
            <HoverCard.Arrow>
              <HoverCard.ArrowTip />
            </HoverCard.Arrow>
            Content
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}

<script lang="ts">
  import { portal } from '@destyler-ui/svelte'
  import { HoverCard } from '@destyler-ui/svelte'
</script>
<HoverCard.Root>
  <HoverCard.Context>
    {#snippet render(hoverCard)}<HoverCard.Trigger>Hover me {hoverCard().open ? '▲' : '▼'}</HoverCard.Trigger>{/snippet}
  </HoverCard.Context>
  <div use:portal><HoverCard.Positioner><HoverCard.Content><HoverCard.Arrow><HoverCard.ArrowTip /></HoverCard.Arrow>Content</HoverCard.Content></HoverCard.Positioner></div>
</HoverCard.Root>

Root Provider

<script setup lang="ts">
import { HoverCard, useHoverCard } from '@destyler-ui/vue'

const hoverCard = useHoverCard()
</script>

<template>
  <button @click="hoverCard.setOpen(true)">Open</button>

  <HoverCard.RootProvider :value="hoverCard">
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Teleport to="body">
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Teleport>
  </HoverCard.RootProvider>
</template>

import { HoverCard, useHoverCard } from '@destyler-ui/react'

export function RootProvider() {
  const hoverCard = useHoverCard()

  return (
    <>
      <button onClick={() => hoverCard.setOpen(true)}>Open</button>

      <HoverCard.RootProvider value={hoverCard}>
        <HoverCard.Trigger>Hover me</HoverCard.Trigger>
        <HoverCard.Positioner>
          <HoverCard.Content>
            <HoverCard.Arrow>
              <HoverCard.ArrowTip />
            </HoverCard.Arrow>
            Content
          </HoverCard.Content>
        </HoverCard.Positioner>
      </HoverCard.RootProvider>
    </>
  )
}

import { HoverCard, useHoverCard } from '@destyler-ui/solid/hover-card'
import { Portal } from 'solid-js/web'

export function RootProvider() {
  const hoverCard = useHoverCard()

  return (
    <>
      <button onClick={() => hoverCard().setOpen(true)}>Open</button>

      <HoverCard.RootProvider value={hoverCard}>
        <HoverCard.Trigger>Hover me</HoverCard.Trigger>
        <Portal>
          <HoverCard.Positioner>
            <HoverCard.Content>
              <HoverCard.Arrow>
                <HoverCard.ArrowTip />
              </HoverCard.Arrow>
              Content
            </HoverCard.Content>
          </HoverCard.Positioner>
        </Portal>
      </HoverCard.RootProvider>
    </>
  )
}

<script lang="ts">
  import { portal } from '@destyler-ui/svelte'
  import { HoverCard, useHoverCard } from '@destyler-ui/svelte'
  const id = $props.id()
  const hoverCard = useHoverCard({ id })
</script>
<button onclick={() => hoverCard().setOpen(true)}>Open</button>
<HoverCard.RootProvider value={hoverCard}>
  <HoverCard.Trigger>Hover me</HoverCard.Trigger>
  <div use:portal><HoverCard.Positioner><HoverCard.Content><HoverCard.Arrow><HoverCard.ArrowTip /></HoverCard.Arrow>Content</HoverCard.Content></HoverCard.Positioner></div>
</HoverCard.RootProvider>

API Reference

Prop	Default	Type
`closeDelay`	`300`	`number` The duration from when the mouse leaves the trigger or content until the hover card closes.
`defaultOpen`	—	`false \| true` The initial open state of the hover card when it is first rendered. Use when you do not need to control its open state.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ trigger: string; content: string; positioner: string; arrow: string; }>` The ids of the elements in the popover. Useful for composition.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`open`	—	`false \| true` Whether the hover card is open
`openDelay`	`700`	`number` The duration from when the mouse enters the trigger until the hover card opens.
`positioning`	—	`calendar.PositioningOptions` The user provided options used to position the popover content
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Emit	Event
`openChange`	`[details: OpenChangeDetails]` Function called when the hover card opens or closes.
`update:open`	`[open: boolean]`

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

No serializable props or emits are declared for this part.

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`children`	—	`null \| string \| number \| bigint \| false \| true \| import("react").ReactElement<unknown, string \| import("react").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("react").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("react").ReactPortal \| import("react").ReactElement<unknown, string \| import("react").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined>`
`closeDelay`	`300`	`number` The duration from when the mouse leaves the trigger or content until the hover card closes.
`defaultOpen`	—	`false \| true` The initial open state of the hover card when it is first rendered. Use when you do not need to control its open state.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ trigger: string; content: string; positioner: string; arrow: string; }>` The ids of the elements in the popover. Useful for composition.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`onOpenChange`	—	`(details: hoverCard.OpenChangeDetails) => void` Function called when the hover card opens or closes.
`open`	—	`false \| true` Whether the hover card is open
`openDelay`	`700`	`number` The duration from when the mouse enters the trigger until the hover card opens.
`positioning`	—	`calendar.PositioningOptions` The user provided options used to position the popover content
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`children*`	—	`(context: UseHoverCardContext) => ReactNode`

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`value*`	—	`UseHoverCardReturn`
`children`	—	`null \| string \| number \| bigint \| false \| true \| import("react").ReactElement<unknown, string \| import("react").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("react").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("react").ReactPortal \| import("react").ReactElement<unknown, string \| import("react").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined>`
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`children`	—	`null \| number \| false \| true \| Node \| JSX.ArrayElement \| (string & {})`
`closeDelay`	`300`	`number` The duration from when the mouse leaves the trigger or content until the hover card closes.
`defaultOpen`	—	`false \| true` The initial open state of the hover card when it is first rendered. Use when you do not need to control its open state.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ trigger: string; content: string; positioner: string; arrow: string; }>` The ids of the elements in the popover. Useful for composition.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`onOpenChange`	—	`(details: OpenChangeDetails) => void` Function called when the hover card opens or closes.
`open`	—	`false \| true` Whether the hover card is open
`openDelay`	`700`	`number` The duration from when the mouse enters the trigger until the hover card opens.
`positioning`	—	`hoverCard.PositioningOptions` The user provided options used to position the popover content
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`children*`	—	`(context: UseHoverCardContext) => Element`

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`value*`	—	`UseHoverCardReturn`
`children`	—	`null \| number \| false \| true \| Node \| JSX.ArrayElement \| (string & {})`
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Trigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Prop	Default	Type
`children`	—	`Snippet<[]> \| undefined`
`closeDelay`	`300`	`number` The duration from when the mouse leaves the trigger or content until the hover card closes.
`defaultOpen`	—	`false \| true` The initial open state of the hover card when it is not controlled. Prefer this over seeding with `open` for uncontrolled usage.
`id`	—	`string`
`ids`	—	`Partial<{ trigger: string; content: string; positioner: string; arrow: string; }>` The ids of the elements in the popover. Useful for composition.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`onOpenChange`	—	`(details: import("@destyler/hover-card").OpenChangeDetails) => void` Function called when the hover card opens or closes.
`open`	—	`false \| true` Whether the hover card is open
`openDelay`	`700`	`number` The duration from when the mouse enters the trigger until the hover card opens.
`positioning`	—	`import("@destyler/calendar").PositioningOptions` The user provided options used to position the popover content
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`skipAnimationOnMount`	`false`	`false \| true` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Prop	Default	Type
`render*`	—	`Snippet<[UseHoverCardContext]>`

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Prop	Default	Type
`value*`	—	`UseHoverCardReturn`
`children`	—	`Snippet<[]> \| undefined`
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`skipAnimationOnMount`	`false`	`false \| true` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Trigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`