Components
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-tooltipRequired Packages(1 package)
pnpm add react-native-reanimatedUsage
import { Tooltip } from '@/components/docyrus-native/tooltip';
<Tooltip text="This is a tooltip" placement="top">
<Button title="Hover me" />
</Tooltip>
<Tooltip text="Auto-dismiss" delayHide={3000} variant="dark">
<Text>Tap me</Text>
</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' |