# Tooltip (React Native)

> A short hint on long-press, since touch has no hover. Also added to the trigger's accessibility hint.

GramproKit for React Native · Overlays · Beta · Source: https://kit.gramproindia.com/native/docs/tooltip

> **Beta:** React Native support is in beta. APIs may change or break between prereleases (npm tag `native`).

_Interactive demo:_ [open the live example](https://kit.gramproindia.com/native/docs/tooltip). The example's source:

```tsx
import { Text } from "react-native";
import { Button } from "@/component-lib/button";
import { useKitTheme } from "@/component-lib/shared/native";
import { Tooltip } from "@/component-lib/tooltip";
import { Row, Section } from "./layout"; // Section and Row: page layout for the demo

function Glyph({ children }: { children: string }) {
  const { tokens } = useKitTheme();
  return <Text style={{ fontSize: 16, color: tokens.fg, fontWeight: "700" }}>{children}</Text>;
}

export function TooltipDemo() {
  const { tokens } = useKitTheme();
  return (
    <Section title="Tooltip · long-press">
      <Text style={{ color: tokens.muted }}>Press and hold a button.</Text>
      <Row>
        <Tooltip content="Archive">
          <Button variant="outline" icon={<Glyph>⌂</Glyph>} aria-label="Archive" />
        </Tooltip>
        <Tooltip content="Duplicate this invoice" side="bottom">
          <Button variant="outline" icon={<Glyph>⧉</Glyph>} aria-label="Duplicate" />
        </Tooltip>
        <Tooltip content="Starts on the right" side="right">
          <Button variant="outline">Right</Button>
        </Tooltip>
        <Tooltip content="Never shown" disabled>
          <Button variant="ghost">Disabled tooltip</Button>
        </Tooltip>
      </Row>
    </Section>
  );
}
```

## Install

```bash
npx @grampro/kit@native add Tooltip
```

## Usage

```tsx
import { Tooltip } from "@/component-lib/tooltip";

<Tooltip content="Copy invoice number">
  <Button icon={<CopyIcon />} aria-label="Copy" />
</Tooltip>
```

## Props

### TooltipProps

| Prop | Type | Description |
|---|---|---|
| `content` (required) | `ReactNode` | The short label. Keep it to a few words. |
| `children` (required) | `ReactElement<ChildProps>` | The control it describes: a single pressable element (any Kit button), cloned with a ref, `onLongPress`, `onPressOut` and an accessibility hint. |
| `side` | `TooltipSide` | Default `top`. |
| `align` | `TooltipAlign` | Default `center`. |
| `gap` | `number` | Distance from the control. Default 6. |
| `delay` | `number` | How long to press before it shows, in ms. Default 400. |
| `duration` | `number` | How long it stays after the finger lifts, in ms. Default 1500. |
| `disabled` | `boolean` |   |
| `style` | `StyleProp<ViewStyle>` | The bubble's style. |
| `styles` | `Partial<{ content: StyleProp<ViewStyle>; text: StyleProp<TextStyle> }>` |   |

## Native and web

- `delay` is how long to press; `duration` is how long it stays after the finger lifts.
- Web version: [Tooltip on the web](https://kit.gramproindia.com/tooltip).