Tooltip · Glowup

Glowup

DATA DISPLAY · 53 / 89

Tooltip

Tooltip — a Material You data display component for React Native and web.

󱀫

packages/ui/src/components/Tooltip.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Properties

3 controls

Content

Position

Disabled

Usage

Tooltip.tsx

Variants

The states and shapes this component is meant to be used in.

Positions

Hover on web, long-press on native. Try each side.

On icon buttons

The label an icon-only control cannot show on its own.

Delays and disabled

Rich

A title, a body and an optional action. With an action it stays open while you move into it — Tab reaches it from the anchor, Escape closes it.

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

10 on TooltipProps

Filter props

󰍉

children

required

React.ReactNode

content

required

string

The tip's text; the body text of a rich tooltip.

action

{ label: string; onPress: () => void }

Rich only: a text button. A rich tooltip with an action stays open while the pointer is over it (web) and until the action is taken or the anchor is long-pressed again (native).

disabled

boolean

enterDelay

number

default: 500

Hover dwell (ms) before the tip appears on web. Without it, sweeping the pointer across a toolbar flashes every tooltip in the row.

hideDelay

number

default: 1500

Auto-hide delay (ms) after long-press on native.

leaveDelay

number

default: 100

Grace period (ms) before the tip leaves on hover-out.

position

"top" | "bottom" | "left" | "right"

default: "top"

title

string

Rich only: the subhead.

variant

"plain" | "rich"

default: "plain"

`"plain"` is the one-line label for an icon-only control. `"rich"` adds a `title` and an `action`, for context a label cannot carry. Defaults to `"plain"`.