Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Tooltip

Tooltip is an overlay component for displaying contextual information on hover or long-press. Supports both simple usage and compound component API for more control.

​
Import

import { Tooltip } from 'radix-native-ui';

​
Usage

import { Tooltip, IconButton } from 'radix-native-ui';

<Tooltip content="Copy to clipboard">
  <IconButton>
    <Icon name="copy" />
  </IconButton>
</Tooltip>

​
Components

Tooltip supports both simple usage and compound component API.

​
Simple Usage

The simple API combines Root, Trigger, Portal, and Content into one component.

​
Tooltip.Root

The root container component that manages tooltip state.

​
Tooltip.Trigger

Element that triggers the tooltip.

​
Tooltip.Portal

Renders tooltip content in a Modal.

​
Tooltip.Content

The tooltip content container.

​
Tooltip.Arrow

Optional arrow indicator.

​
Simple Tooltip Props

​
Examples

​
Basic Tooltip

<Tooltip content="This is a tooltip">
  <Button>Hover me</Button>
</Tooltip>

​
Positioned Tooltips

<Flex gap={4}>
  <Tooltip content="Top tooltip" side="top">
    <Button>Top</Button>
  </Tooltip>

  <Tooltip content="Right tooltip" side="right">
    <Button>Right</Button>
  </Tooltip>

  <Tooltip content="Bottom tooltip" side="bottom">
    <Button>Bottom</Button>
  </Tooltip>

  <Tooltip content="Left tooltip" side="left">
    <Button>Left</Button>
  </Tooltip>
</Flex>

​
Icon Button Tooltips

<Flex gap={2}>
  <Tooltip content="Copy">
    <IconButton>
      <Icon name="copy" />
    </IconButton>
  </Tooltip>

  <Tooltip content="Edit">
    <IconButton>
      <Icon name="pencil" />
    </IconButton>
  </Tooltip>

  <Tooltip content="Delete">
    <IconButton color="red">
      <Icon name="trash" />
    </IconButton>
  </Tooltip>
</Flex>

​
With Delay

<Tooltip content="Shows after 1 second" delayDuration={1000}>
  <Button>Delayed tooltip</Button>
</Tooltip>

​
Rich Content

<Tooltip
  content={
    <Flex direction="column" gap={1}>
      <Text weight="medium">Keyboard Shortcut</Text>
      <Text size={1}>Press ⌘ + C to copy</Text>
    </Flex>
  }
>
  <IconButton>
    <Icon name="keyboard" />
  </IconButton>
</Tooltip>

​
Toolbar

<Card>
  <Flex gap={1}>
    <Tooltip content="Bold (⌘B)">
      <IconButton variant="soft">
        <Icon name="bold" />
      </IconButton>
    </Tooltip>

    <Tooltip content="Italic (⌘I)">
      <IconButton variant="soft">
        <Icon name="italic" />
      </IconButton>
    </Tooltip>

    <Tooltip content="Underline (⌘U)">
      <IconButton variant="soft">
        <Icon name="underline" />
      </IconButton>
    </Tooltip>

    <Tooltip content="Link">
      <IconButton variant="soft">
        <Icon name="link" />
      </IconButton>
    </Tooltip>
  </Flex>
</Card>

​
Form Field Help

<Flex direction="column" gap={1}>
  <Flex direction="row" gap={1} align="center">
    <Text size={2} weight="medium">API Key</Text>
    <Tooltip content="Your API key is found in the Developer Settings">
      <IconButton size={1} variant="ghost">
        <Icon name="info" />
      </IconButton>
    </Tooltip>
  </Flex>
  <TextField placeholder="Enter your API key" />
</Flex>