中文网
🌐 Nodejs.cn
首页指南EAS参考学习

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

Tooltip

Jetpack Compose Tooltip components for displaying contextual information on long-press.

Android
Included in Expo Go
Recommended version:
~56.0.26

Expo UI Tooltip matches the official Jetpack Compose Tooltip API. TooltipBox wraps anchor content and displays a tooltip. The tooltip content is provided via the TooltipBox.PlainTooltip or TooltipBox.RichTooltip compound components, which match PlainTooltip and RichTooltip respectively. Tooltips can be triggered by long-press or shown programmatically via ref.

Material 3 rich tooltip with title, body, learn more action, and anchor buttonMaterial 3 rich tooltip with title, body, learn more action, and anchor button

Installation

Terminal
- npx expo install @expo/ui
- yarn expo install @expo/ui
- pnpm expo install @expo/ui
- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Plain tooltip

Long-press the anchor content to display the tooltip.

PlainTooltipExample.tsx
import { Host, TooltipBox, Button, Text } from '@expo/ui/jetpack-compose';

export default function PlainTooltipExample() {
  return (
    <Host matchContents>
      <TooltipBox>
        <TooltipBox.PlainTooltip>
          <Text>Add to favorites</Text>
        </TooltipBox.PlainTooltip>
        <Button onClick={() => {}}>
          <Text>Favorite</Text>
        </Button>
      </TooltipBox>
    </Host>
  );
}

Rich tooltip with title and body

Use TooltipBox.RichTooltip with Title and Text compound component pattern for more detailed contextual information.

RichTooltipExample.tsx
import { Host, TooltipBox, Button, Text } from '@expo/ui/jetpack-compose';

export default function RichTooltipExample() {
  return (
    <Host matchContents>
      <TooltipBox>
        <TooltipBox.RichTooltip>
          <TooltipBox.RichTooltip.Title>
            <Text>Camera</Text>
          </TooltipBox.RichTooltip.Title>
          <TooltipBox.RichTooltip.Text>
            <Text>Take photos and record videos with your device camera.</Text>
          </TooltipBox.RichTooltip.Text>
        </TooltipBox.RichTooltip>
        <Button onClick={() => {}}>
          <Text>Open Camera</Text>
        </Button>
      </TooltipBox>
    </Host>
  );
}

Rich tooltip with action

Add an interactive action with TooltipBox.RichTooltip.Action. Use isPersistent so the tooltip stays visible for the user to tap it. hasAction is automatically derived when an action slot is present.

RichTooltipActionExample.tsx
import { Host, TooltipBox, Button, TextButton, Text } from '@expo/ui/jetpack-compose';

export default function RichTooltipActionExample() {
  return (
    <Host matchContents>
      <TooltipBox isPersistent>
        <TooltipBox.RichTooltip>
          <TooltipBox.RichTooltip.Title>
            <Text>Permissions Required</Text>
          </TooltipBox.RichTooltip.Title>
          <TooltipBox.RichTooltip.Text>
            <Text>This feature requires camera and microphone access.</Text>
          </TooltipBox.RichTooltip.Text>
          <TooltipBox.RichTooltip.Action>
            <TextButton onClick={() => {}}>
              <Text>Learn More</Text>
            </TextButton>
          </TooltipBox.RichTooltip.Action>
        </TooltipBox.RichTooltip>
        <Button onClick={() => {}}>
          <Text>Record Video</Text>
        </Button>
      </TooltipBox>
    </Host>
  );
}

Programmatic show and dismiss

Use a ref to imperatively show() or dismiss() the tooltip without requiring a long-press.

ProgrammaticTooltipExample.tsx
import { useRef } from 'react';
import { Host, TooltipBox, type TooltipBoxRef, Button, Text, Row } from '@expo/ui/jetpack-compose';

export default function ProgrammaticTooltipExample() {
  const tooltipRef = useRef<TooltipBoxRef>(null);

  return (
    <Host matchContents>
      <TooltipBox ref={tooltipRef} isPersistent>
        <TooltipBox.PlainTooltip>
          <Text>Shown programmatically!</Text>
        </TooltipBox.PlainTooltip>
        <Button onClick={() => {}}>
          <Text>Anchor</Text>
        </Button>
      </TooltipBox>
      <Row horizontalArrangement={{ spacedBy: 8 }}>
        <Button onClick={() => tooltipRef.current?.show()}>
          <Text>Show</Text>
        </Button>
        <Button onClick={() => tooltipRef.current?.dismiss()}>
          <Text>Dismiss</Text>
        </Button>
      </Row>
    </Host>
  );
}

API

import { TooltipBox } from '@expo/ui/jetpack-compose';

No API data file found, sorry!