Melt UI Logo

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Features

  • Opens when the trigger is focused or hovered
  • Closes when the trigger is activated or with escape
  • Custom delay for opening and closing
  • Supports custom positioning

Anatomy

  • Trigger: The element that triggers the tooltip popover
  • Content: The tooltip's content container
  • Arrow: An optional arrow component

API Reference

createTooltip

Props

Prop Default Type / Description
positioning position: 'top'
FloatingConfig

A configuration object which determines how the floating element is positioned relative to the trigger.
arrowSize 8
number

The size of the arrow which points to the trigger in pixels.
open false
boolean

Whether the tooltip is open or not.
closeOnPointerDown true
boolean

Whether the tooltip closes when the pointer is down.
openDelay 1000
number

The delay in milliseconds before the tooltip opens after a pointer over event.
closeDelay 500
number

The delay in milliseconds before the tooltip closes after a pointer leave event.

Returned Props

Returned Prop Type Description
options
Writable<CreateTooltipProps>

A writable store that controls the options of the tooltip.
open
Writable<boolean>

A writable store that controls the open state of the tooltip.
trigger
-

The builder store used to create the tooltip trigger.
content
-

The builder store used to create the tooltip content.
arrow
-

The builder store used to create the tooltip arrow.

trigger

Data Attributes

Data Attribute Value
[data-state]

'open' | 'closed'
[data-melt-tooltip-trigger]

Present on all tooltip trigger elements.

content

Data Attributes

Data Attribute Value
[data-melt-tooltip-content]

Present on all tooltip content elements.

arrow

Data Attributes

Data Attribute Value
[data-arrow]

'true'
[data-melt-tooltip-arrow]

Present on all tooltip arrow elements.

Accessibility

Adheres to the Tooltip WAI-ARIA design pattern

Key Behavior
Tab

Opens/closes the tooltip without delay.
Space

If open, closes the tooltip without delay.
Enter

If open, closes the tooltip without delay.
Esc

If open, closes the tooltip without delay.