# rn-tooltip
URL: /docs/native/components/tooltip

Contextual popup with configurable placement, arrow, and visual variants.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-tooltip
```

**Dependencies:**
- [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)

## Usage

```tsx
import { Tooltip } from '@/components/docyrus-native/tooltip';

```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `visible` | `boolean` | — | Controlled visibility state |
| `defaultOpen` | `boolean` | `false` | Whether the tooltip is initially open |
| `onOpenChange` | `(open: boolean) => void` | — | Callback when visibility changes |
| `onClose` | `() => void` | — | Callback when tooltip closes |
| `text` | `string` | — | Tooltip text content (required) |
| `placement` | `'top' \| 'bottom' \| 'left' \| 'right' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | `'bottom'` | Tooltip position relative to the trigger |
| `offset` | `number` | `8` | Distance from the trigger element in pixels |
| `arrow` | `boolean` | `true` | Show directional arrow |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tooltip padding and font size |
| `variant` | `'default' \| 'dark' \| 'light'` | `'default'` | Visual style variant |
| `delayHide` | `number` | `0` | Auto-hide delay in milliseconds (0 = manual close only) |
| `maxWidth` | `number` | — | Maximum tooltip width |
| `children` | `ReactNode` | — | Trigger element |
| `className` | `string` | — | Tooltip bubble CSS classes |
| `contentClassName` | `string` | — | Inner content container CSS classes |
| `textClassName` | `string` | — | Tooltip text CSS classes |

## Type Exports

| Type | Description |
|------|-------------|
| `TooltipProps` | Props for Tooltip component |
| `TooltipPlacement` | `'top' \| 'bottom' \| 'left' \| 'right' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` |
| `TooltipSize` | `'sm' \| 'md' \| 'lg'` |
| `TooltipVariant` | `'default' \| 'dark' \| 'light'` |