Tooltip

Usage

A tooltip is supplementary: it shows on hover or keyboard focus, so keep anything essential visible elsewhere. Text wraps at about 20rem, and long identifiers break, so a tooltip is never wider than the screen. children takes one focusable element that forwards its ref, such as a Button; plain text becomes a focusable text trigger.

Unavailable actions

Use a Tooltip to say why a Button is disabled. The Button stays in the Tab order and is announced as unavailable, so keyboard focus or a tap shows the explanation as well as hover; Escape or a tap elsewhere hides it, and the Button never activates.

Sides

Alignment

Above or below the trigger, start and end line up the left and right edges (mirrored in right-to-left text); beside it, on the left or right side, start lines up the top edges and end the bottom edges. A surface that flips to the other side keeps its alignment. It always stays at least 16 px inside the screen edges: where an aligned surface would run off the screen, it slides along the trigger instead; a tall surface is capped 16 px from the top or bottom; and beside the trigger it stops 16 px short of the far screen edge.

Props

Accessibility

• Opens on hover or focus; closes on Escape or blur.
• Content is associated with the trigger.
• A disabled Button trigger stays focusable and is announced as unavailable; a tap also opens the tooltip.
• delayDuration sets the hover delay. The tooltip appears without motion.

Manifest entry

<Tooltip content="GRID 38S MC"><Button>COORD</Button></Tooltip>

{
  "description": "Supplementary text on hover or keyboard focus of a trigger, wrapping at about 20rem. A disabled Button trigger stays focusable and announced unavailable, so focus or a tap shows the explanation. Built on React Aria Components (TooltipTrigger + Tooltip), portal'd, with a bordered surface.",
  "props": {
    "side": {
      "type": "enum",
      "values": [
        "top",
        "right",
        "bottom",
        "left"
      ],
      "default": "top"
    },
    "align": {
      "type": "enum",
      "values": [
        "start",
        "center",
        "end"
      ],
      "default": "center"
    },
    "delayDuration": {
      "type": "number",
      "default": 200
    },
    "open": {
      "type": "boolean"
    },
    "defaultOpen": {
      "type": "boolean"
    },
    "onOpenChange": {
      "type": "function"
    }
  },
  "slots": {
    "content": {
      "type": "text | node",
      "required": true
    },
    "children": {
      "type": "focusable trigger element | text (text renders a text button)",
      "required": true
    }
  },
  "composable_with": [
    "Button",
    "Badge",
    "Toolbar"
  ],
  "never_inside": [
    "Tooltip"
  ],
  "example": "<Tooltip content=\"GRID 38S MC\"><Button>COORD</Button></Tooltip>"
}