Tooltip

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

	<script lang="ts">
  import { Tooltip } from "$lib";
  import { flyAndScale } from "@/utils";
</script>
 
<Tooltip.Root openDelay={200}>
  <Tooltip.Trigger
    class="inline-flex h-12 items-center
  justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
  text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-all hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
  >
    Hover me
  </Tooltip.Trigger>
  <Tooltip.Content
    class="z-20 flex items-center justify-center rounded-input border border-muted bg-background p-3 text-sm font-medium shadow-mini outline-none"
    transition={flyAndScale}
    transitionConfig={{ y: 8, duration: 150 }}
    sideOffset={8}
  >
    It doesn't get much better than bits.
  </Tooltip.Content>
</Tooltip.Root>

	<script lang="ts">
  import { Tooltip } from "$lib";
  import { flyAndScale } from "@/utils";
</script>
 
<Tooltip.Root openDelay={200}>
  <Tooltip.Trigger
    class="inline-flex h-12 items-center
  justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
  text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-all hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
  >
    Hover me
  </Tooltip.Trigger>
  <Tooltip.Content
    class="z-20 flex items-center justify-center rounded-input border border-muted bg-background p-3 text-sm font-medium shadow-mini outline-none"
    transition={flyAndScale}
    transitionConfig={{ y: 8, duration: 150 }}
    sideOffset={8}
  >
    It doesn't get much better than bits.
  </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>

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

Component API

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`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes 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`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes 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
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`size`	`number`	The height and width of the arrow in pixels. `Default: 8`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes 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.

🚧 UNDER CONSTRUCTION 🚧