Report an issue

Tooltip

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

	<script lang="ts">
  import { Tooltip } from "bits-ui";
  import { MagicWand } from "$icons/index.js";
</script>
 
<Tooltip.Provider>
  <Tooltip.Root delayDuration={200}>
    <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 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>
</Tooltip.Provider>

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.