{"_id":"@anb98/rn-tooltip","_rev":"2-f54f4646b1b8d298271dce2c776ab78e","name":"@anb98/rn-tooltip","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@anb98/rn-tooltip","version":"1.0.0","keywords":["react-native","tooltip","popover","ios","android"],"license":"MIT","_id":"@anb98/rn-tooltip@1.0.0","maintainers":[{"name":"anb98","email":"abdielantonio13@gmail.com"}],"homepage":"https://github.com/Anb98/rn-tooltip#readme","bugs":{"url":"https://github.com/Anb98/rn-tooltip/issues"},"dist":{"shasum":"3fd51e64966559bacc3be55c3d15a280e6d2d632","tarball":"https://registry.npmjs.org/@anb98/rn-tooltip/-/rn-tooltip-1.0.0.tgz","fileCount":31,"integrity":"sha512-CTDN7ukbzmmyyGAp7KuYgDpwwhRd6M5rrEk/OYq/A5roC1aCcNr/M4Kkm0bMsvhK8Gzb/TnpWZHHcxvlK0S5JA==","signatures":[{"sig":"MEUCIQCBd5NuyMn7hLKR9m39iqCYP7etRYw+Mhkl4qpTvrWmCgIgDm/Ch0Z0kENWKkgUjtBqJQByDU7fPma4jegTq3W9geU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":104147},"main":"./lib/commonjs/index.js","types":"./lib/typescript/src/index.d.ts","module":"./lib/module/index.js","source":"src/index.ts","exports":{".":{"types":"./lib/typescript/src/index.d.ts","import":"./lib/module/index.js","require":"./lib/commonjs/index.js"}},"gitHead":"4757ea04a99a12be41f6445098e5074fbc7327aa","scripts":{"test":"jest","build":"bob build","clean":"rm -rf lib","prepare":"bob build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"anb98","email":"abdielantonio13@gmail.com"},"repository":{"url":"git+https://github.com/Anb98/rn-tooltip.git","type":"git"},"_npmVersion":"11.3.0","description":"Tooltip for React Native with auto positioning, viewport clamping and trigger-tracking arrow. No native code, no runtime dependencies.","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","react-native":"src/index.ts","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"18.2.0","typescript":"^5.4.5","@babel/core":"^7.24.0","@types/jest":"^29.5.12","@types/react":"^18.2.79","react-native":"0.75.0","react-test-renderer":"18.2.0","react-native-builder-bob":"^0.30.0","@react-native/babel-preset":"^0.75.0","@testing-library/react-native":"^12.5.0"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.72.0"},"_npmOperationalInternal":{"tmp":"tmp/rn-tooltip_1.0.0_1787522471629_0.2479697210496088","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":[["commonjs",{"esm":true}],["module",{"esm":true}],"typescript"]}},"1.0.1":{"name":"@anb98/rn-tooltip","version":"1.0.1","description":"Tooltip for React Native with auto positioning, viewport clamping and trigger-tracking arrow. No native code, no runtime dependencies.","license":"MIT","main":"./lib/commonjs/index.js","module":"./lib/module/index.js","types":"./lib/typescript/src/index.d.ts","source":"src/index.ts","react-native":"src/index.ts","exports":{".":{"types":"./lib/typescript/src/index.d.ts","import":"./lib/module/index.js","require":"./lib/commonjs/index.js"}},"sideEffects":false,"keywords":["react-native","tooltip","popover","ios","android"],"repository":{"type":"git","url":"git+https://github.com/Anb98/rn-tooltip.git"},"bugs":{"url":"https://github.com/Anb98/rn-tooltip/issues"},"homepage":"https://github.com/Anb98/rn-tooltip#readme","scripts":{"build":"bob build","clean":"rm -rf lib","prepare":"bob build","test":"jest","typecheck":"tsc --noEmit"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.72.0"},"react-native-builder-bob":{"source":"src","output":"lib","targets":[["commonjs",{"esm":true}],["module",{"esm":true}],"typescript"]},"devDependencies":{"@babel/core":"^7.24.0","@react-native/babel-preset":"^0.75.0","@testing-library/react-native":"^12.5.0","@types/jest":"^29.5.12","@types/react":"^18.2.79","jest":"^29.7.0","react":"18.2.0","react-native":"0.75.0","react-native-builder-bob":"^0.30.0","react-test-renderer":"18.2.0","typescript":"^5.4.5"},"_id":"@anb98/rn-tooltip@1.0.1","gitHead":"cc59f8528c5f8685bb8ea4198fa7166ce43a93e6","_nodeVersion":"22.14.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-WYoI5IKmOlyMm/jjMl6n2A3Qs8W7QZeQD7RGK3hJuJwfxyZMg8ORWY3pPDeyuSNCl1dqqhGYciv1jO8X7cPPFQ==","shasum":"d4eff448a9c0439f15e431003312b1e445b1479a","tarball":"https://registry.npmjs.org/@anb98/rn-tooltip/-/rn-tooltip-1.0.1.tgz","fileCount":31,"unpackedSize":104711,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEju4UBQvvWn0W/OdsHg7BeLxzFcW+y1rggFOFWdFioJAiEAn5+qWhpuKX7aPcZ0oeIVqTYhlbXJpD+bAzulfVkcVIE="}]},"_npmUser":{"name":"anb98","email":"abdielantonio13@gmail.com"},"directories":{},"maintainers":[{"name":"anb98","email":"abdielantonio13@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rn-tooltip_1.0.1_1787523446872_0.3323222553123739"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-23T22:01:11.461Z","modified":"2026-08-23T22:17:27.147Z","1.0.0":"2026-08-23T22:01:11.767Z","1.0.1":"2026-08-23T22:17:27.017Z"},"bugs":{"url":"https://github.com/Anb98/rn-tooltip/issues"},"license":"MIT","homepage":"https://github.com/Anb98/rn-tooltip#readme","keywords":["react-native","tooltip","popover","ios","android"],"repository":{"type":"git","url":"git+https://github.com/Anb98/rn-tooltip.git"},"description":"Tooltip for React Native with auto positioning, viewport clamping and trigger-tracking arrow. No native code, no runtime dependencies.","maintainers":[{"name":"anb98","email":"abdielantonio13@gmail.com"}],"readme":"# @anb98/rn-tooltip\r\n\r\n[![npm version](https://img.shields.io/npm/v/@anb98/rn-tooltip.svg)](https://www.npmjs.com/package/@anb98/rn-tooltip)\r\n[![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\r\n[![types: TypeScript](https://img.shields.io/badge/types-TypeScript-3178C6.svg)](src/index.ts)\r\n\r\nA tooltip for React Native with automatic position selection, viewport clamping, and an arrow that tracks the trigger. No native code, no runtime dependencies.\r\n\r\n<p align=\"center\">\r\n  <img src=\"docs/demo.gif\" width=\"280\" alt=\"Tooltip opening near a trigger button\" />\r\n</p>\r\n\r\n## Quick path\r\n\r\n1. Install:\r\n\r\n   ```sh\r\n   npm install @anb98/rn-tooltip\r\n   # or\r\n   yarn add @anb98/rn-tooltip\r\n   # or\r\n   pnpm add @anb98/rn-tooltip\r\n   ```\r\n\r\n   Peer dependencies: `react >=18.0.0`, `react-native >=0.72.0`.\r\n\r\n2. Use it:\r\n\r\n   ```tsx\r\n   import { Tooltip } from \"@anb98/rn-tooltip\";\r\n   import { Text } from \"react-native\";\r\n\r\n   function Example() {\r\n     return (\r\n       <Tooltip\r\n         content={\r\n           <Text style={{ color: \"white\" }}>\r\n             Dark background, arrow, and radius out of the box.\r\n           </Text>\r\n         }\r\n       >\r\n         <Text>Press me</Text>\r\n       </Tooltip>\r\n     );\r\n   }\r\n   ```\r\n\r\n3. Verify: pressing the trigger opens a modal tooltip near it; pressing outside the tooltip (or the Android back button) closes it.\r\n\r\n<img src=\"docs/default.png\" width=\"340\" alt=\"Zero-config tooltip with the default dark background, arrow, and radius\" />\r\n\r\n[Full runnable example](examples/Default.tsx)\r\n\r\n## Props\r\n\r\n| Prop              | Type                                                         | Default              | Description                                                                                               |\r\n| ----------------- | ------------------------------------------------------------ | -------------------- | --------------------------------------------------------------------------------------------------------- |\r\n| `content`         | `ReactNode`                                                  | required             | Tooltip body, rendered inside the modal box.                                                              |\r\n| `children`        | `ReactNode`                                                  | required             | The pressable trigger content.                                                                            |\r\n| `width`           | `number \\| \\`${number}%\\``                                   | `200`                | Fixed pixel width or a percentage of the screen width.                                                    |\r\n| `backgroundColor` | `string`                                                     | `'rgba(0,0,0,0.75)'` | Box and arrow fill color.                                                                                 |\r\n| `position`        | `TooltipPosition` (`'top' \\| 'bottom' \\| 'left' \\| 'right'`) | auto                 | Forces a side; when omitted the side with the most room is chosen.                                        |\r\n| `arrowAlignment`  | `ArrowAlignment` (`'start' \\| 'center' \\| 'end'`)            | `'center'`           | Where the arrow (and box) align along the cross axis relative to the trigger.                             |\r\n| `centerBy`        | `'tooltip' \\| 'screen'`                                      | `'tooltip'`          | Whether the box centers on the trigger or on the screen along the cross axis.                             |\r\n| `offset`          | `{ x?: number; y?: number }`                                 | `undefined`          | Extra gap between trigger and box. Positive always pushes the box farther away; negative pulls it closer. |\r\n| `onChange`        | `(visible: boolean) => void`                                 | `undefined`          | Called whenever the tooltip opens or closes.                                                              |\r\n\r\n`TooltipRef` (via `ref`):\r\n\r\n| Method    | Description                                                        |\r\n| --------- | ------------------------------------------------------------------ |\r\n| `open()`  | Opens the tooltip programmatically, same as pressing the trigger.  |\r\n| `close()` | Closes the tooltip programmatically, same as pressing the overlay. |\r\n\r\n```tsx\r\n// From examples/CustomStyle.tsx — styles omitted, see the full file\r\n<Tooltip\r\n  backgroundColor=\"#4F46E5\"\r\n  width=\"80%\"\r\n  content={\r\n    <View style={styles.content}>\r\n      <Text style={styles.title}>Custom style</Text>\r\n      <Text style={styles.body}>\r\n        Brand background color and an 80% width box.\r\n      </Text>\r\n    </View>\r\n  }\r\n>\r\n  <View style={styles.button}>\r\n    <Text style={styles.buttonText}>Press me</Text>\r\n  </View>\r\n</Tooltip>\r\n```\r\n\r\n<img src=\"docs/custom-style.png\" width=\"420\" alt=\"Tooltip with a custom brand background color and an 80% width\" />\r\n\r\n[Full runnable example](examples/CustomStyle.tsx)\r\n\r\n## Advanced examples\r\n\r\n**Explicit position**\r\n\r\n```tsx\r\n// From examples/Positions.tsx — styles omitted, see the full file\r\n<Tooltip\r\n  content={<Text style={styles.tooltipBody}>Opens below</Text>}\r\n  position=\"bottom\"\r\n  backgroundColor=\"#1F2937\"\r\n>\r\n  <View style={styles.chip}>\r\n    <Text style={styles.chipText}>Top</Text>\r\n  </View>\r\n</Tooltip>\r\n```\r\n\r\n<p>\r\n  <img src=\"docs/position-top.png\" width=\"330\" alt='Tooltip opening above its trigger with position=\"top\"' />\r\n  <img src=\"docs/position-bottom.png\" width=\"330\" alt='Tooltip opening below its trigger with position=\"bottom\"' />\r\n  <img src=\"docs/position-left.png\" width=\"330\" alt='Tooltip opening to the left of its trigger with position=\"left\"' />\r\n  <img src=\"docs/position-right.png\" width=\"330\" alt='Tooltip opening to the right of its trigger with position=\"right\"' />\r\n</p>\r\n\r\n[Full runnable example](examples/Positions.tsx)\r\n\r\n**Arrow alignment**\r\n\r\n```tsx\r\n// From examples/ArrowAlignments.tsx — styles omitted, see the full file\r\n<Tooltip\r\n  content={<Text style={styles.tooltipBody}>Arrow at the start</Text>}\r\n  position=\"bottom\"\r\n  arrowAlignment=\"start\"\r\n  backgroundColor=\"#1F2937\"\r\n>\r\n  <View style={styles.chip}>\r\n    <Text style={styles.chipText}>start</Text>\r\n  </View>\r\n</Tooltip>\r\n```\r\n\r\n<p>\r\n  <img src=\"docs/arrow-start.png\" width=\"330\" alt=\"Tooltip arrow aligned to the start of the trigger\" />\r\n  <img src=\"docs/arrow-center.png\" width=\"330\" alt=\"Tooltip arrow centered on the trigger\" />\r\n  <img src=\"docs/arrow-end.png\" width=\"330\" alt=\"Tooltip arrow aligned to the end of the trigger\" />\r\n</p>\r\n\r\n[Full runnable example](examples/ArrowAlignments.tsx)\r\n\r\n**Center by screen**\r\n\r\n```tsx\r\n// From examples/CenterByScreen.tsx — styles omitted, see the full file\r\n<Tooltip\r\n  width=\"90%\"\r\n  centerBy=\"screen\"\r\n  position=\"bottom\"\r\n  backgroundColor=\"#1F2937\"\r\n  content={\r\n    <View style={styles.content}>\r\n      <Text style={styles.title}>Screen-centered</Text>\r\n      <Text style={styles.body}>\r\n        The banner centers on the screen while the arrow keeps tracking the\r\n        trigger.\r\n      </Text>\r\n    </View>\r\n  }\r\n>\r\n  <View style={styles.icon}>\r\n    <Text style={styles.iconText}>i</Text>\r\n  </View>\r\n</Tooltip>\r\n```\r\n\r\n<img src=\"docs/center-screen.png\" width=\"480\" alt=\"Wide banner tooltip centered on the screen while its arrow tracks a corner trigger\" />\r\n\r\n[Full runnable example](examples/CenterByScreen.tsx)\r\n\r\n**Offset**\r\n\r\n```tsx\r\n<Tooltip\r\n  content={<Text>10px farther from the trigger</Text>}\r\n  position=\"top\"\r\n  offset={{ y: 10 }}\r\n>\r\n  <Text>Trigger</Text>\r\n</Tooltip>\r\n```\r\n\r\n**Imperative ref**\r\n\r\n```tsx\r\n// From examples/RichContent.tsx — styles omitted, see the full file\r\nimport { useRef } from 'react'\r\nimport { Tooltip, TooltipRef } from '@anb98/rn-tooltip'\r\n\r\nconst tooltipRef = useRef<TooltipRef>(null)\r\n\r\n<Tooltip\r\n  ref={tooltipRef}\r\n  backgroundColor=\"#1F2937\"\r\n  content={\r\n    <View style={styles.content}>\r\n      <Text style={styles.title}>New feature</Text>\r\n      <Text style={styles.body}>Tap here to filter your results.</Text>\r\n      <Pressable style={styles.dismiss} onPress={() => tooltipRef.current?.close()}>\r\n        <Text style={styles.dismissText}>Got it</Text>\r\n      </Pressable>\r\n    </View>\r\n  }\r\n>\r\n  <View style={styles.chip}>\r\n    <Text style={styles.chipText}>Filter</Text>\r\n  </View>\r\n</Tooltip>\r\n```\r\n\r\n<img src=\"docs/rich-content.png\" width=\"300\" alt=\"Coachmark tooltip with a title, body text, and a Got it button that closes it\" />\r\n\r\n[Full runnable example](examples/RichContent.tsx)\r\n\r\n## Viewport clamping\r\n\r\nWhen the trigger sits near a screen edge, the box clamps inside the viewport instead of overflowing, and the arrow shifts to keep pointing at the trigger.\r\n\r\n<img src=\"docs/edge-clamping.png\" width=\"340\" alt=\"Tooltip box clamped inside the viewport with the arrow shifted to keep pointing at a trigger pinned to the right edge\" />\r\n\r\n[Full runnable example](examples/EdgeClamping.tsx)\r\n\r\n## License\r\n\r\nMIT © 2026 Abdiel Martinez\r\n","readmeFilename":"README.md"}