Hover Card

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

Show Code

<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

Show Code

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

Show Code

<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={setOpen}>
        <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>

Positioning

Customize the hover card positioning.

Show Code

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

Show Code

<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

Show Code

<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

Root

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]

Arrow

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

ArrowTip

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

Content

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

Context

No serializable props or emits are declared for this part.

Positioner

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

RootProvider

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.

Root

Prop	Default	Type
children	—	null | string | number | bigint | false | true | react82.ReactElement<unknown, string | react82.JSXElementConstructor<any>> | Iterable<react82.ReactNode> | react82.ReactPortal | Promise<string | number | bigint | boolean | react82.ReactPortal | react82.ReactElement<unknown, string | react82.JSXElementConstructor<any>> | Iterable<react82.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.

Arrow

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

ArrowTip

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

Content

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

Context

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

Positioner

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

RootProvider

Prop	Default	Type
value*	—	UseHoverCardReturn
children	—	null | string | number | bigint | false | true | react82.ReactElement<unknown, string | react82.JSXElementConstructor<any>> | Iterable<react82.ReactNode> | react82.ReactPortal | Promise<string | number | bigint | boolean | react82.ReactPortal | react82.ReactElement<unknown, string | react82.JSXElementConstructor<any>> | Iterable<react82.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.

Root

Prop	Default	Type
children	—	null | number | false | true | Node | solid_js56.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.

Arrow

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

ArrowTip

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

Content

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

Context

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

Positioner

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

RootProvider

Prop	Default	Type
value*	—	UseHoverCardReturn
children	—	null | number | false | true | Node | solid_js56.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?: solid_js56.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Root

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
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("/home/runner/work/ui/ui/packages/svelte/dist/index").HoverCardOpenChangeDetails) => 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	—	PositioningOptions | undefined 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.

Arrow

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ArrowTip

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Content

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Context

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

Positioner

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

RootProvider

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("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children	—	Snippet<[]> | undefined