Tooltip

A popup that displays additional information when hovering over or focusing on an element.

Show Code

<script setup lang="ts">
import { Tooltip } from '@destyler-ui/vue'
</script>
<template>
  <Tooltip.Root :openDelay="0" :closeDelay="0">
    <Tooltip.Trigger>hover me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Arrow>
        <Tooltip.ArrowTip />
      </Tooltip.Arrow>
      <Tooltip.Content>content</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
</template>

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

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

import { Tooltip } from '@destyler-ui/solid/tooltip'
import { Portal } from 'solid-js/web'

export function Basic() {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
      <Portal>
        <Tooltip.Positioner>
          <Tooltip.Content>I am a tooltip!</Tooltip.Content>
        </Tooltip.Positioner>
      </Portal>
    </Tooltip.Root>
  )
}

<script lang="ts">
  import type { TooltipRootProps } from '@destyler-ui/svelte'
  import { Tooltip } from '@destyler-ui/svelte'
  const props: TooltipRootProps = $props()
</script>

<Tooltip.Root openDelay={0} closeDelay={0} {...props}>
  <Tooltip.Trigger>hover me</Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Arrow><Tooltip.ArrowTip /></Tooltip.Arrow>
    <Tooltip.Content>content</Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

Anatomy

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

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

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

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

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

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

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

<Tooltip.Root openDelay={0} closeDelay={0}>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Arrow>
      <Tooltip.ArrowTip />
    </Tooltip.Arrow>
    <Tooltip.Content>Tooltip content</Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

Examples

Basic

Show Code

<script setup lang="ts">
import { Tooltip } from '@destyler-ui/vue'
</script>
<template>
  <Tooltip.Root :openDelay="0" :closeDelay="0">
    <Tooltip.Trigger>hover me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Arrow>
        <Tooltip.ArrowTip />
      </Tooltip.Arrow>
      <Tooltip.Content>content</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
</template>

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

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

import { Tooltip } from '@destyler-ui/solid/tooltip'
import { Portal } from 'solid-js/web'

export function Basic() {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
      <Portal>
        <Tooltip.Positioner>
          <Tooltip.Content>I am a tooltip!</Tooltip.Content>
        </Tooltip.Positioner>
      </Portal>
    </Tooltip.Root>
  )
}

<script lang="ts">
  import type { TooltipRootProps } from '@destyler-ui/svelte'
  import { Tooltip } from '@destyler-ui/svelte'
  const props: TooltipRootProps = $props()
</script>

<Tooltip.Root openDelay={0} closeDelay={0} {...props}>
  <Tooltip.Trigger>hover me</Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Arrow><Tooltip.ArrowTip /></Tooltip.Arrow>
    <Tooltip.Content>content</Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

Arrow

Display an arrow on the tooltip.

Show Code

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

<template>
  <Tooltip.Root>
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Content>
        <Tooltip.Arrow>
          <Tooltip.ArrowTip />
        </Tooltip.Arrow>
        I am a tooltip!
      </Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
</template>

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

export function Arrow() {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
      <Tooltip.Positioner>
        <Tooltip.Content>
          <Tooltip.Arrow>
            <Tooltip.ArrowTip />
          </Tooltip.Arrow>
          I am a tooltip!
        </Tooltip.Content>
      </Tooltip.Positioner>
    </Tooltip.Root>
  )
}

import { Tooltip } from '@destyler-ui/solid/tooltip'
import { Portal } from 'solid-js/web'

export function Arrow() {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
      <Portal>
        <Tooltip.Positioner>
          <Tooltip.Arrow>
            <Tooltip.ArrowTip />
          </Tooltip.Arrow>
          <Tooltip.Content>I am a tooltip!</Tooltip.Content>
        </Tooltip.Positioner>
      </Portal>
    </Tooltip.Root>
  )
}

<script lang="ts">import { Tooltip } from '@destyler-ui/svelte'</script>
<Tooltip.Root>
  <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
  <Tooltip.Positioner><Tooltip.Content><Tooltip.Arrow><Tooltip.ArrowTip /></Tooltip.Arrow>I am a tooltip!</Tooltip.Content></Tooltip.Positioner>
</Tooltip.Root>

Controlled

Control the tooltip open state programmatically.

Show Code

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

const isOpen = ref(false)
</script>

<template>
  <button @click="isOpen = !isOpen">Toggle</button>
  <Tooltip.Root v-model:open="isOpen">
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Content>I am a tooltip!</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
</template>

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

export function Controlled() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      <Tooltip.Root open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
        <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
        <Tooltip.Positioner>
          <Tooltip.Content>I am a tooltip!</Tooltip.Content>
        </Tooltip.Positioner>
      </Tooltip.Root>
    </>
  )
}

import { Tooltip } from '@destyler-ui/solid/tooltip'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'

export function Controlled() {
  const [isOpen, setIsOpen] = createSignal(false)
  return (
    <>
      <button type="button" onClick={() => setIsOpen(!isOpen())}>
        Toggle
      </button>
      <Tooltip.Root open={isOpen()} onOpenChange={({ open }) => setIsOpen(open)}>
        <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
        <Portal>
          <Tooltip.Positioner>
            <Tooltip.Content>I am a tooltip!</Tooltip.Content>
          </Tooltip.Positioner>
        </Portal>
      </Tooltip.Root>
    </>
  )
}

<script lang="ts">
  import { Tooltip } from '@destyler-ui/svelte'
  let open = $state(false)
</script>
<button onclick={() => open = !open}>Toggle</button>
<Tooltip.Root bind:open>
  <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
  <Tooltip.Positioner><Tooltip.Content>I am a tooltip!</Tooltip.Content></Tooltip.Positioner>
</Tooltip.Root>

Initial Open

Open the tooltip by default with defaultOpen.

Show Code

<script setup lang="ts">
import { Tooltip } from '@destyler-ui/vue'
</script>
<template>
 <Tooltip.Root default-open :open-delay="0" :close-delay="0">
    <Tooltip.Trigger>hover me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Arrow>
        <Tooltip.ArrowTip />
      </Tooltip.Arrow>
      <Tooltip.Content>content</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
</template>

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

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

import { Tooltip } from '@destyler-ui/solid/tooltip'
import { Portal } from 'solid-js/web'

export function InitialOpen() {
  return (
    <Tooltip.Root defaultOpen openDelay={0} closeDelay={0}>
      <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
      <Portal>
        <Tooltip.Positioner>
          <Tooltip.Content>I am a tooltip!</Tooltip.Content>
        </Tooltip.Positioner>
      </Portal>
    </Tooltip.Root>
  )
}

<script lang="ts">
  import type { TooltipRootProps } from '@destyler-ui/svelte'
  import { Tooltip } from '@destyler-ui/svelte'
  const props: TooltipRootProps = $props()
</script>

<Tooltip.Root {...props} defaultOpen openDelay={0} closeDelay={0}>
  <Tooltip.Trigger>hover me</Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Arrow><Tooltip.ArrowTip /></Tooltip.Arrow>
    <Tooltip.Content>content</Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

Positioning

Customize the tooltip positioning.

Show Code

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

<template>
  <Tooltip.Root
    :positioning="{
      placement: 'left-start',
      gutter: 16,
      offset: { mainAxis: 12, crossAxis: 12 },
    }"
  >
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Content>I am a tooltip!</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
</template>

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

export function Positioning() {
  return (
    <Tooltip.Root
      positioning={{
        placement: 'left-start',
        gutter: 16,
        offset: { mainAxis: 12, crossAxis: 12 },
      }}
    >
      <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
      <Tooltip.Positioner>
        <Tooltip.Content>I am a tooltip!</Tooltip.Content>
      </Tooltip.Positioner>
    </Tooltip.Root>
  )
}

import { Tooltip } from '@destyler-ui/solid/tooltip'
import { Portal } from 'solid-js/web'

export function Positioning() {
  return (
    <Tooltip.Root
      positioning={{
        placement: 'left-start',
        offset: { mainAxis: 12, crossAxis: 12 },
      }}
    >
      <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
      <Portal>
        <Tooltip.Positioner>
          <Tooltip.Content>I am a tooltip!</Tooltip.Content>
        </Tooltip.Positioner>
      </Portal>
    </Tooltip.Root>
  )
}

<script lang="ts">import { Tooltip } from '@destyler-ui/svelte'</script>
<Tooltip.Root positioning={{ placement: 'left-start', gutter: 16, offset: { mainAxis: 12, crossAxis: 12 } }}>
  <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
  <Tooltip.Positioner><Tooltip.Content>I am a tooltip!</Tooltip.Content></Tooltip.Positioner>
</Tooltip.Root>

Timings

Customize the open and close delay timings.

Show Code

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

<template>
  <Tooltip.Root :closeDelay="0" :openDelay="0">
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Content>I am a tooltip!</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
</template>

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

export function Timings() {
  return (
    <Tooltip.Root closeDelay={0} openDelay={0} immediate>
      <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
      <Tooltip.Positioner>
        <Tooltip.Content>I am a tooltip!</Tooltip.Content>
      </Tooltip.Positioner>
    </Tooltip.Root>
  )
}

import { Tooltip } from '@destyler-ui/solid/tooltip'
import { Portal } from 'solid-js/web'

export function Timings() {
  return (
    <Tooltip.Root closeDelay={0} openDelay={0}>
      <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
      <Portal>
        <Tooltip.Positioner>
          <Tooltip.Content>I am a tooltip!</Tooltip.Content>
        </Tooltip.Positioner>
      </Portal>
    </Tooltip.Root>
  )
}

<script lang="ts">import { Tooltip } from '@destyler-ui/svelte'</script>
<Tooltip.Root closeDelay={0} openDelay={0} immediate>
  <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
  <Tooltip.Positioner><Tooltip.Content>I am a tooltip!</Tooltip.Content></Tooltip.Positioner>
</Tooltip.Root>

Render Function

Use render function for custom tooltip rendering.

Show Code

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

<template>
  <Tooltip.Root>
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Context v-slot="tooltip">
        <Tooltip.Content>This tooltip is open: {{ tooltip.open.toString() }}</Tooltip.Content>
      </Tooltip.Context>
    </Tooltip.Positioner>
  </Tooltip.Root>
</template>

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

export function RenderFn() {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
      <Tooltip.Positioner>
        <Tooltip.Context>
          {tooltip => (
            <Tooltip.Content>
              This tooltip is open:
              {tooltip.open.toString()}
            </Tooltip.Content>
          )}
        </Tooltip.Context>
      </Tooltip.Positioner>
    </Tooltip.Root>
  )
}

import { Tooltip } from '@destyler-ui/solid/tooltip'
import { Portal } from 'solid-js/web'

export function RenderFn() {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
      <Portal>
        <Tooltip.Positioner>
          <Tooltip.Context>
            {context => (
              <Tooltip.Content>This tooltip is open: {context().open.toString()}</Tooltip.Content>
            )}
          </Tooltip.Context>
        </Tooltip.Positioner>
      </Portal>
    </Tooltip.Root>
  )
}

<script lang="ts">import { Tooltip } from '@destyler-ui/svelte'</script>
<Tooltip.Root>
  <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
  <Tooltip.Positioner><Tooltip.Context>
    {#snippet render(tooltip)}<Tooltip.Content>This tooltip is open: {tooltip().open.toString()}</Tooltip.Content>{/snippet}
  </Tooltip.Context></Tooltip.Positioner>
</Tooltip.Root>

Root Provider

Show Code

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

const tooltip = useTooltip()
</script>

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

  <Tooltip.RootProvider :value="tooltip">
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Content>I am a tooltip!</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.RootProvider>
</template>

import { Tooltip, useTooltip } from '@destyler-ui/react'

export function RootProvider() {
  const tooltip = useTooltip()

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

      <Tooltip.RootProvider value={tooltip}>
        <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
        <Tooltip.Positioner>
          <Tooltip.Content>I am a tooltip!</Tooltip.Content>
        </Tooltip.Positioner>
      </Tooltip.RootProvider>
    </>
  )
}

import { Tooltip, useTooltip } from '@destyler-ui/solid/tooltip'
import { Portal } from 'solid-js/web'

export function RootProvider() {
  const tooltip = useTooltip()

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

      <Tooltip.RootProvider value={tooltip}>
        <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
        <Portal>
          <Tooltip.Positioner>
            <Tooltip.Content>I am a tooltip!</Tooltip.Content>
          </Tooltip.Positioner>
        </Portal>
      </Tooltip.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Tooltip, useTooltip } from '@destyler-ui/svelte'
  const id = $props.id()
  const tooltip = useTooltip({ id })
</script>
<button onclick={() => tooltip().setOpen(true)}>Open</button>
<Tooltip.RootProvider value={tooltip}>
  <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
  <Tooltip.Positioner><Tooltip.Content>I am a tooltip!</Tooltip.Content></Tooltip.Positioner>
</Tooltip.RootProvider>

API Reference

Root

Prop	Default	Type
aria-label	—	string Custom label for the tooltip.
closeDelay	500	number The close delay of the tooltip.
closeOnClick	true	false | true Whether the tooltip should close on click
closeOnEscape	true	false | true Whether to close the tooltip when the Escape key is pressed.
closeOnPointerDown	true	false | true Whether to close the tooltip on pointerdown.
closeOnScroll	true	false | true Whether the tooltip should close on scroll
defaultOpen	—	false | true The initial open state of the tooltip when it is first rendered. Use when you do not need to control its open state.
disabled	—	false | true Whether the tooltip is disabled
id	—	string The `id` of the tooltip.
ids	—	Partial<{ trigger: string; content: string; arrow: string; positioner: string; }> The ids of the elements in the tooltip. Useful for composition.
interactive	false	false | true Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content.
lazyMount	false	false | true Whether to enable lazy mounting
open	—	false | true Whether the tooltip is open
openDelay	1000	number The open delay of the tooltip.
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 tooltip is opened.
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
aria-label	—	string Custom label for the tooltip.
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	500	number The close delay of the tooltip.
closeOnClick	true	false | true Whether the tooltip should close on click
closeOnEscape	true	false | true Whether to close the tooltip when the Escape key is pressed.
closeOnPointerDown	true	false | true Whether to close the tooltip on pointerdown.
closeOnScroll	true	false | true Whether the tooltip should close on scroll
defaultOpen	—	false | true The initial open state of the tooltip when it is first rendered. Use when you do not need to control its open state.
disabled	—	false | true Whether the tooltip is disabled
id	—	string The `id` of the tooltip.
ids	—	Partial<{ trigger: string; content: string; arrow: string; positioner: string; }> The ids of the elements in the tooltip. Useful for composition.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
interactive	false	false | true Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content.
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 tooltip is opened.
open	—	false | true Whether the tooltip is open
openDelay	1000	number The open delay of the tooltip.
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: UseTooltipContext) => 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*	—	UseTooltipReturn
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.

Root

Prop	Default	Type
aria-label	—	string Custom label for the tooltip.
children	—	null | number | false | true | Node | JSX.ArrayElement | (string & {})
closeDelay	500	number The close delay of the tooltip.
closeOnClick	true	false | true Whether the tooltip should close on click
closeOnEscape	true	false | true Whether to close the tooltip when the Escape key is pressed.
closeOnPointerDown	true	false | true Whether to close the tooltip on pointerdown.
closeOnScroll	true	false | true Whether the tooltip should close on scroll
defaultOpen	—	false | true The initial open state of the tooltip when it is first rendered. Use when you do not need to control its open state.
disabled	—	false | true Whether the tooltip is disabled
id	—	string The `id` of the tooltip.
ids	—	Partial<{ trigger: string; content: string; arrow: string; positioner: string; }> The ids of the elements in the tooltip. Useful for composition.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
interactive	false	false | true Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content.
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 tooltip is opened.
open	—	false | true Whether the tooltip is open
openDelay	1000	number The open delay of the tooltip.
positioning	—	tooltip.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?: 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?: 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?: 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: UseTooltipContext) => Element

Positioner

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.

RootProvider

Prop	Default	Type
value*	—	UseTooltipReturn
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.

Root

Prop	Default	Type
aria-label	—	string Custom label for the tooltip.
children	—	Snippet<[]> | undefined
closeDelay	500	number The close delay of the tooltip.
closeOnClick	true	false | true Whether the tooltip should close on click
closeOnEscape	true	false | true Whether to close the tooltip when the Escape key is pressed.
closeOnPointerDown	true	false | true Whether to close the tooltip on pointerdown.
closeOnScroll	true	false | true Whether the tooltip should close on scroll
defaultOpen	—	false | true The initial open state of the tooltip when it is not controlled. Prefer this over seeding with `open` for uncontrolled usage.
disabled	—	false | true Whether the tooltip is disabled
id	—	string
ids	—	Partial<{ trigger: string; content: string; arrow: string; positioner: string; }> The ids of the elements in the tooltip. Useful for composition.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
interactive	false	false | true Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content.
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/tooltip").OpenChangeDetails) => void Function called when the tooltip is opened.
open	—	false | true Whether the tooltip is open
openDelay	1000	number The open delay of the tooltip.
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.

Arrow

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

ArrowTip

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

Content

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

Context

Prop	Default	Type
render	—	Snippet<[UseTooltipContext]>

Positioner

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

RootProvider

Prop	Default	Type
value*	—	UseTooltipReturn
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