Tooltip

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

Basic

Hover over the button to see tooltip text.

Multiple Tooltips

Wrap all in a TooltipProvider for shared delay state. Consecutive tooltips open instantly within the skip window.

Usage

julia

using Suite

TooltipProvider(
    Tooltip(
        TooltipTrigger(
            Button("Hover me"),
        ),
        TooltipContent(
            P("Add to library"),
        ),
    ),
)

Keyboard Interactions

Key	Action
`Tab`	Focus the trigger element to open the tooltip
`Escape`	Dismisses the tooltip immediately

Accessibility

Uses role="tooltip" and aria-describedby to associate the tooltip content with its trigger.

Opens on hover or focus after a 700ms delay. Consecutive tooltips within a shared provider open instantly during the 300ms skip window.

Touch devices are excluded — tooltips are not shown on tap.

API Reference

TooltipProvider

Prop	Type	Default	Description
delay_duration	Int	700	Delay in ms before the tooltip opens on hover
skip_delay_duration	Int	300	Duration in ms of the skip window for consecutive tooltips

Tooltip

Prop	Type	Default	Description
children...	Any	-	Trigger and content sub-components

TooltipTrigger

Prop	Type	Default	Description
children...	Any	-	The element that triggers the tooltip on hover/focus

TooltipContent

Prop	Type	Default	Description
side	String	"top"	Preferred side of the trigger to render ("top", "right", "bottom", "left")
side_offset	Int	4	Distance in px from the trigger
class	String	""	Additional CSS classes