Skip to main content
Tooltips show brief helper text when users hover over a component. Wrap any single element to add a tooltip. For richer hover content like status previews or structured data, use HoverCard. For interactive content that stays open until dismissed, use Popover.

​
Basic Usage

​
Side Placement

Control which side the tooltip appears on with the side parameter.

​
Instant Tooltips

By default, tooltips wait 700ms before appearing. Set delay=0 for immediate feedback — useful in dashboards or status displays where users are scanning quickly.

​
API Reference

Tooltip Parameters

​
content
str
required
Tooltip text. Can be passed as a positional argument.
​
side
str | None
default:"None"
Which side to show the tooltip: "top", "right", "bottom", "left".
​
delay
int | None
default:"None"
Delay in milliseconds before showing the tooltip. Defaults to 700ms. Set to 0 for instant display.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Tooltip
{
  "type": "Tooltip",
  "children?": "[Component]",
  "let?": "object",
  "content": "string (required)",
  "side?": "top | right | bottom | left",
  "delay?": "number",
  "cssClass?": "string"
}
For the complete protocol schema, see Tooltip.