1. Documentation
  3. Overlays
  5. Tooltip
ReadmenpmGitHub
  • Introduction
  • Installation
  • Theming
  • Icons
  • Accordion
  • Card
  • Scroll Area
  • Separator
  • Sidebar
  • Field
  • Label
  • Input
  • Textarea
  • Number Field
  • OTP Field
  • Select
  • Combobox
  • Checkbox
  • Radio
  • Switch
  • Slider
  • Toggle
  • Calendar
  • Date Picker
  • File Upload
  • Button
  • Copy Button
  • Dropdown
  • Command
  • Tabs
  • Breadcrumb
  • Pagination
  • Tree
  • Table
  • Data Table
  • Stat
  • Timeline
  • Avatar
  • Status Bar
  • Badge
  • Meter
  • Empty
  • Skeleton
  • Spinner
  • Toast
  • Dialog
  • Sheet
  • Popover
  • Tooltip
  • Text
  • Kbd
  • Code Block
  • Utilities
  • Design rules

Tooltip

A hover and focus hint that opens immediately, with no provider required.

Loading documentation…

Popover< PreviousTextNext >

Powered by heyo

On this page

UsagePlacementArrow and delayPropertiesTooltip.Provider
<Tooltip content="Redeploy"><Button shape="square" icon={IconRefresh} aria-label="Redeploy" /></Tooltip><Tooltip content="Open in a new tab" side="right"><Button shape="square" icon={IconExternalLink} aria-label="Open" /></Tooltip>

Tooltip opens immediately. A delay is a hedge against tooltips that should not exist: if the hint is worth showing, it is worth showing when the pointer arrives, and if it is not, remove it.

No provider is required. Add Tooltip.Provider only when you want a shared delay across a whole region.

Usage

tsx
import { Button, Tooltip } from "@heyo-sh/heyo-ui";<Tooltip content="Redeploy">  <Button shape="square" icon={IconRefresh} aria-label="Redeploy" /></Tooltip>;

The child becomes the trigger — it needs to accept a ref and spread props, which every heyo-ui component does.

A tooltip is not a label

It appears on hover and focus, which means it never appears on a touch screen. Give an icon-only control an aria-label as well; the tooltip is the convenience, not the name.

Placement

<Tooltip content="Top" side="top"><Button>Top</Button></Tooltip><Tooltip content="Right" side="right"><Button>Right</Button></Tooltip><Tooltip content="Bottom" side="bottom"><Button>Bottom</Button></Tooltip><Tooltip content="Left" side="left"><Button>Left</Button></Tooltip>

Arrow and delay

<Tooltip arrow content="With an arrow"><Button>Arrow</Button></Tooltip><Tooltip delay={400} content="Opens after 400ms"><Button>Delayed</Button></Tooltip>

A shared delay for a whole toolbar:

tsx
<Tooltip.Provider delay={300} closeDelay={100}>  {toolbar}</Tooltip.Provider>

Properties

contentReactNoderequired

The hint. Keep it to one line where you can.

childrenReactNoderequired

The trigger. It must accept a ref and spread props.

side"top" | "right" | "bottom" | "left"optional

Preferred placement. It defaults to top.

align"start" | "center" | "end"optional

Alignment against the trigger.

sideOffset / alignOffsetnumberoptional

Offsets in pixels.

delay / closeDelaynumberoptional

Open and close delays in milliseconds. Instant by default.

arrowbooleanoptional

A little pointer aimed at the trigger.

classNamestringoptional

Merged into the popup.

Tooltip.Provider

delay / closeDelaynumberoptional

Shared defaults for every tooltip beneath it.