Tooltip

A component for displaying brief, contextual information when hovering over or focusing on an element.

Anatomy

Usage

<script>
  import {Portal, Tooltip} from 'ui-ingredients';
</script>

<Tooltip.Root>
  <Tooltip.Trigger>Trigger</Tooltip.Trigger>

  <Portal>
    <Tooltip.Positioner>
      <Tooltip.Content>
        <Tooltip.Arrow>
          <Tooltip.ArrowTip />
        </Tooltip.Arrow>

        Content
      </Tooltip.Content>
    </Tooltip.Positioner>
  </Portal>
</Tooltip.Root>

API Reference

Root

Prop	Default	Description
`aria-label`		`string` Custom label for the tooltip.
`closeDelay`	`500`	`number` The close delay of the tooltip.
`closeOnClick`	`true`	`boolean` Whether the tooltip should close on click
`closeOnEscape`	`true`	`boolean` Whether to close the tooltip when the Escape key is pressed.
`closeOnPointerDown`	`true`	`boolean` Whether to close the tooltip on pointerdown.
`closeOnScroll`	`true`	`boolean` Whether the tooltip should close on scroll
`defaultOpen`		`boolean` The initial open state of the tooltip when rendered. Use when you don't need to control the open state of the tooltip.
`disabled`		`boolean` Whether the tooltip is disabled
`id`		`string` The unique identifier of the machine.
`ids`		`{ trigger?: string; content?: string; arrow?: string; positioner?: string; }` The ids of the elements in the tooltip. Useful for composition.
`interactive`	`false`	`boolean` Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content.
`keepMounted`		`boolean` Whether to keep the component mounted after exit.
`lazyMount`		`boolean` Whether to enable lazy mounting.
`onOpenChange`		`(details: OpenChangeDetails) => void` Function called when the tooltip is opened.
`open`		`boolean` The controlled open state of the tooltip
`openDelay`	`1000`	`number` The open delay of the tooltip.
`positioning`		`PositioningOptions` The user provided options used to position the popover content

Arrow

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

ArrowTip

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Content

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	content
`data-placement`	The placement of the content
`data-scope`	tooltip
`data-state`	"open" \| "closed"

Positioner

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Trigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-expanded`	Present when expanded
`data-part`	trigger
`data-scope`	tooltip
`data-state`	"open" \| "closed"

Accessibility

Keyboard Support

Key	Description
Tab	Opens/closes the tooltip without delay.
Escape	If open, closes the tooltip without delay.