Skip to main content
196

Search Lumen

Find components, APIs, guides, and recipes.

GitHub
React Native docs
ActionsReact Native

Tooltip

Show native contextual help around an independently accessible anchor.

Public APILumenTooltipReact Native

Native example

Use Tooltip

Use brief supplemental help. Essential instructions belong in visible content. Pass LumenTooltipState for explicit Compose show/dismiss controls; React Native uses visible/onVisibleChange and SwiftUI uses isPresented binding. Disabling dismisses help without removing the anchor.

View captured React Native example
Tooltip rendered in the Expo web renderer Lumen playground
Captured exampleExpo web renderer
tsx
<LumenTooltip label="Project help" text="Save this project" visible={visible} onVisibleChange={setVisible} />

Reference

Public API

The primary shared and platform-specific options exposed by LumenTooltip.

APIValues or typeDefaultDescription
textStringRequiredProvides non-empty translated contextual help.
modifierModifierModifierApplies anchor-container layout.
stateLumenTooltipStaterememberLumenTooltipState()Supports application-controlled visibility with Lumen state backed by Material.
enabledBooleantrueEnables help and dismisses it when disabled.
content@Composable () -> UnitRequiredProvides an independently labeled native anchor.

Native behavior

Design and accessibility

When to use it

Use brief supplemental help. Essential instructions belong in visible content. Pass LumenTooltipState for explicit Compose show/dismiss controls; React Native uses visible/onVisibleChange and SwiftUI uses isPresented binding. Disabling dismisses help without removing the anchor.

Accessibility

Keeps the anchor independently named and delegates long-press, pointer, and popup dismissal to Material.

Shared component

Available on other platforms

Apple / SwiftUIAndroid / Compose
React Native docsNative primitives