Tooltip

Short label that appears on hover or focus.

When to use

Use Tooltip when you need short label that appears on hover or focus.

Import

TypeScript

import { Tooltip } from '@gzodo/ui'

Use Tooltip to name an icon button or to add one line of context. It is not a replacement for a label on a form field. The tip is portaled and positioned by the library. Keep the text short; the type size is 12px.

Examples

Basic

Hover or focus the child. The tip appears above the trigger after a short delay.

Placement

side is top, bottom, left, or right. align is start, center, or end along that side.

On an icon

Pair a tooltip with IconButton so the action has a visible name on hover and a title for assistive tech.

Delay

delayDuration is milliseconds before the tip opens. Default is 100.

Tooltip

Property

Description

Type

Default

children

The trigger. Wrapped so it can receive hover and focus.

ReactNode

—

content

What the tip shows.

ReactNode

—

side

Which side of the trigger the tip prefers.

'top' | 'bottom' | 'left' | 'right'

'top'

align

Alignment along that side.

'start' | 'center' | 'end'

'center'

delayDuration

Open delay in milliseconds.

number

100

className

Class on the tip surface.

string

—

DropDown

Text