Tooltip

import { Save } from "lucide-react"

import { IconButton } from "@hel/ui/icon-button"

When to use it#

Use a tooltip to name something that has no visible text, most often an icon button, or to add one short line of explanation to a button. It appears when the pointer rests on the element or the element gets keyboard focus, and goes away when either leaves.

Keep it to a few words, and only plain text. A tooltip cannot be reached with a touch screen, and people cannot move into it, so never put anything essential or interactive in one. For content people can read at their own pace, or click, use a Popover. For a richer preview of a link, use a Preview Card.

An icon button still needs its own aria-label. The tooltip is for sighted mouse and keyboard users, and does not replace the name that a screen reader reads.

Import#

Copyimport { Tooltip, TooltipTrigger, TooltipContent } from "@hel/ui/tooltip"

Anatomy#

Tooltip holds the open state, TooltipTrigger is the element that shows it, and TooltipContent is the bubble.

TooltipTrigger renders its own button. To use your own button, pass it with render, so the two are one element. Do not put a Button inside the trigger as its child, because that nests one button in another.

Copy<Tooltip>
  <TooltipTrigger render={<IconButton icon={Save} aria-label="Save" />} />
  <TooltipContent>Save changes</TooltipContent>
</Tooltip>

Examples#

With a button#

Any element can be the trigger, as long as it can receive focus. Use the tooltip to add a line that the label does not have room for.

import { Plus } from "lucide-react"

import { Button } from "@hel/ui/button"

Sides#

side sets which side of the element the tooltip appears on, and it moves to the other side by itself when there is no room. The default is top. Prefer inline-start and inline-end over left and right when the layout can be right to left, since they follow the reading direction. align lines the tooltip up with the start, center or end of the element, and sideOffset sets the gap, 8px by default.

import { Info } from "lucide-react"

import { Flex } from "@hel/ui/flex"

Disabled buttons#

A disabled button does not respond to the pointer, so a tooltip on it never shows. If you need to explain why something is disabled, keep the button focusable with aria-disabled and block the action yourself, or put the explanation in text next to it.

Props#

TooltipContent#

Tooltip#

Takes every prop of the Base UI tooltip, such as open and onOpenChange to control it, and defaultOpen.

TooltipTrigger#

Takes render, and delay and closeDelay from Base UI to change how quickly it appears and goes away.