OVERLAY

Tooltip

Tooltips reveal a short label near their child without taking space in the page layout.

PLAYGROUND

A label for a compact action

Hover the action or move focus to it with the keyboard. The label stays out of the normal layout until it is needed.

Create a new project
dowe
Tooltip label:"Create a new project" position:"top" variant:"solid" scheme:"muted"
  Button variant:"solid" scheme:"primary" iconStart:"add-circle"
    "New project"

POSITION

Place the label around its child

position selects the side of the child where the floating label appears. Use the side with the clearest available space.

Top tooltip
Bottom tooltip
Start tooltip
End tooltip
dowe
Tooltip label:"Top tooltip" position:"top"
  Button
    "Top"

Tooltip label:"End tooltip" position:"end"
  Button
    "End"

APPEARANCE

Two surfaces, semantic schemes

variant controls the tooltip surface. scheme chooses its design family independently from the child it describes.

Solid muted by default

Saved to your workspace

Soft semantic context

This action cannot be undone
Primary contextInfo contextWarning context

TARGET BEHAVIOR

A pointer-first, portable contract

The same source keeps its child content on every target. Only targets with hover or keyboard focus present the floating label.

WEB

Hover and focus label

Dowe positions the label beside the child when it is hovered or receives keyboard focus.

DESKTOP

Same focused affordance

Desktop reuses the web presentation so compact controls remain understandable with a pointer or keyboard.

ANDROID AND IOS

Child content only

Touch targets render the child without a persistent tooltip because they do not expose hover.

API

Props

Tooltip accepts one or more normal view children and the applicable common spacing, sizing, visibility, and accessibility props.

Prop
Type
Default

No data

There are no records to display