REACT-NATIVES

WIRED FOR SPEED

react-natives v2.2.0

Theme

Light

Dark

Get Started

Components

Feedback & Overlay

Tooltip

A popup component that displays informational text when a trigger element is pressed or long-pressed.

Example

Preview

Code

Props

Tooltip Props

Prop

Type

Default

Description

placement

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

'bottom'

The preferred placement of the tooltip relative to its trigger.

isOpen

boolean

—

Controlled open state of the tooltip.

defaultIsOpen

boolean

false

Initial open state when uncontrolled.

onOpen

() => void

—

Callback invoked when the tooltip opens.

onClose

() => void

—

Callback invoked when the tooltip closes.

trigger *

(props: { ref: React.Ref<any>; onPress: () => void; onLongPress: () => void }) => React.ReactNode

—

Render function that returns the trigger element, receiving ref and event handlers.

TooltipContent Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the tooltip content container.

TooltipText Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the tooltip text.

Usage Guidelines

When to use

Use Tooltip to provide additional context or descriptions for UI elements on hover or press.

Best practices

•

Use for supplementary information that is not essential to the task.

•

Keep tooltip text short — one sentence maximum.

•

Position tooltips to avoid obscuring important content.

Accessibility

Tooltip content is accessible via long-press on mobile and hover on web. Content is announced by screen readers.

Related Components

Toast

A compound notification component for displaying brief, auto-dismissing messages via ToastProvider and the useToast hook.

Text

A typographic component for rendering text with built-in size, weight, and decoration variants.

Icon

A wrapper component for rendering icon elements from any icon library via the `as` prop.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License