Tooltip

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

<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

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

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

<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 :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}>
        <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()}>
        <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>

Positioning

Customize the tooltip positioning.

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

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

<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

<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

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]`

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
`aria-label`	—	`string` Custom label for the tooltip.
`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`	`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.

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: UseTooltipContext) => 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*`	—	`UseTooltipReturn`
`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.

Prop	Default	Type
`aria-label`	—	`string` Custom label for the tooltip.
`children`	—	`null \| number \| false \| true \| Node \| solid_js78.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.

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js78.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?: solid_js78.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?: solid_js78.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: UseTooltipContext) => Element`

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js78.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*`	—	`UseTooltipReturn`
`children`	—	`null \| number \| false \| true \| Node \| solid_js78.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_js78.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
`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`
`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("/home/runner/work/ui/ui/packages/svelte/dist/index").TooltipOpenChangeDetails) => 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`	—	`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.

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

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

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

Prop	Default	Type
`render`	—	`Snippet<[UseTooltipContext]>`

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

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