Tooltip

Provides additional information or context when users hover over or interact with an element.

	<script lang="ts">
  import { Tooltip } from "bits-ui";
  import { flyAndScale } from "@/utils/index.js";
  import { MagicWand } from "$icons/index.js";
</script>
 
<Tooltip.Root openDelay={0}>
  <Tooltip.Trigger
    class="inline-flex size-10 items-center justify-center rounded-full
  border border-border-input bg-background-alt shadow-btn ring-dark ring-offset-background hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
  >
    <MagicWand class="size-5" />
  </Tooltip.Trigger>
  <Tooltip.Content
    transition={flyAndScale}
    transitionConfig={{ y: 8, duration: 150 }}
    sideOffset={8}
  >
    <div class="bg-background">
      <Tooltip.Arrow class="rounded-[2px] border-l border-t border-dark-10" />
    </div>
    <div
      class="flex items-center justify-center rounded-input border border-dark-10 bg-background p-3 text-sm font-medium shadow-popover outline-none"
    >
      Make some magic!
    </div>
  </Tooltip.Content>
</Tooltip.Root>

Structure

	<script lang="ts">
  import { Tooltip } from "bits-ui";
</script>
 
<Tooltip.Root>
  <Tooltip.Trigger />
  <Tooltip.Content>
    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip.Root>

API Reference

Tooltip.Root

The root component containing the parts of the tooltip.

Property	Type	Description
`openDelay`	`number`	The amount of time in milliseconds to delay opening the tooltip when hovering over the trigger. `Default: 700`
`closeDelay`	`number`	The amount of time in milliseconds to delay closing the tooltip when the mouse leaves the trigger. `Default: 300`
`closeOnEscape`	`boolean`	Whether or not to close the tooltip when pressing the escape key. `Default: true`
`closeOnPointerDown`	`boolean`	Whether or not to close the tooltip when clicking outside of the tooltip. `Default: true`
`disableHoverableContent`	`boolean`	Whether or not to disable the hoverable content. This is useful when the content contains interactive elements. `Default: false`
`group`	`string`	The group the tooltip belongs to. `Default: —— undefined`
`open`	`boolean`	The open state of the tooltip component. `Default: false`
`onOpenChange`	`function`	A callback that fires when the open state changes. `Default: —— undefined`
`portal`	`union`	Where to render the tooltip when it is open. Defaults to the body. Can be disabled by passing `null` `Default: —— undefined`

Slot Property	Type	Description
`ids`	`object`	The ids of the elements within the component, useful when you don't necessarily want to provide a custom ID, but still want access to the ID being assigned (if any).

Tooltip.Trigger

A component which triggers the opening and closing of the tooltip on hover or focus.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-state`	`enum`	The open state of the tooltip.
`data-tooltip-trigger`	`——`	Present on the trigger element.

Tooltip.Content

The contents of the tooltip which are displayed when the tooltip is open.

Property	Type	Description
`transition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`transitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`inTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`inTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`outTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`outTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`side`	`enum`	The preferred side of the anchor to render against when open. Will be reversed when collisions occur. Floating UI reference. `Default: —— undefined`
`sideOffset`	`number`	The amount of offset to apply to the menu's position on the x-axis. Floating UI reference. `Default: 0`
`align`	`enum`	The preferred alignment of the anchor to render against when open. Floating UI reference. `Default: —— undefined`
`alignOffset`	`number`	An offset in pixels from the 'start' or 'end' alignment options. Floating UI reference. `Default: 0`
`avoidCollisions`	`boolean`	When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges. Floating UI reference. `Default: true`
`collisionBoundary`	`union`	A boundary element or array of elements to check for collisions against. Floating UI reference. `Default: —— undefined`
`collisionPadding`	`number`	The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision. Floating UI reference. `Default: 0`
`fitViewport`	`boolean`	Whether the floating element should be constrained to the viewport. Floating UI reference. `Default: false`
`sameWidth`	`boolean`	Whether the content should be the same width as the trigger. Floating UI reference. `Default: false`
`strategy`	`enum`	The positioning strategy to use for the floating element. Floating UI reference. `Default: absolute`
`overlap`	`boolean`	Whether the floating element can overlap the reference element. Floating UI reference. `Default: false`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-tooltip-content`	`——`	Present on the content element.

Tooltip.Arrow

An optional arrow element which points to the trigger when the tooltip is open.

Property	Type	Description
`size`	`number`	The height and width of the arrow in pixels. `Default: 8`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-arrow`	`——`	Present on the arrow element.
`data-tooltip-arrow`	`——`	Present on the arrow element.