{"_id":"@atom-design-mog/tooltip","_rev":"2-9b48edf28c70d23cc8a181b6d0965122","name":"@atom-design-mog/tooltip","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom-design-mog/tooltip","version":"1.0.0","keywords":["react-native","tooltip","ui-component","popup","overlay"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/tooltip@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"e1d680bf93e3eb592d1f60822d5910386c445373","tarball":"https://registry.npmjs.org/@atom-design-mog/tooltip/-/tooltip-1.0.0.tgz","fileCount":3,"integrity":"sha512-sWSCOAJtRsPIQEqme9TzStEF0VQRrvwGLjNNTf3BZ/TpFzM/4t8Y0swNYgtv8sFRb2PPTXU42r/mFoO4aqG+XQ==","signatures":[{"sig":"MEYCIQD5SfEtGgafKRuypJer5cTqUJz2aKlGFBIvEsSbcK3KsAIhALdn8c/iEvBEnhlIAwMIS7OszCKCG5nb4C2zRglFkw4b","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5921},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A React Native tooltip component with customizable position and content.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/tooltip_1.0.0_1763728059211_0.9671449241598413","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/tooltip","version":"1.0.1","description":"A React Native tooltip component with customizable position and content.","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","tooltip","ui-component","popup","overlay"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_id":"@atom-design-mog/tooltip@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-IXFuGqyhYOf9SIi1yLjteV8LrHXAUw6y+pG16GEax0fYyxPeG05VHbQQJzuyxkcvRbs9XnfPh+rf2lUxGpgpaQ==","shasum":"8ea181fd833baf8a82f2c62ce7a08a66ca32639a","tarball":"https://registry.npmjs.org/@atom-design-mog/tooltip/-/tooltip-1.0.1.tgz","fileCount":4,"unpackedSize":10587,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDoSISB5tupux9diyvoHjkby6SUUChKjspQh1ISDB9lWAiBEHmfSweEjUcpfmVohAFsX9bHCFY33oKHL+rr52I8phA=="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tooltip_1.0.1_1763973787181_0.8414921694278104"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T12:27:39.106Z","modified":"2025-11-24T08:43:07.576Z","1.0.0":"2025-11-21T12:27:39.415Z","1.0.1":"2025-11-24T08:43:07.366Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","tooltip","ui-component","popup","overlay"],"description":"A React Native tooltip component with customizable position and content.","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom-design-mog/tooltip\n\nA lightweight and flexible React Native Tooltip / Popover component for the Atom Design System (Moglix). Supports 4-directional positioning, smart auto-alignment, rich content, and a clean UI with arrow indicators.\n\n---\n\n## 📦 Installation\n\nInstall with npm:\n\n```bash\nnpm install @atom-design-mog/tooltip\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom-design-mog/tooltip\n```\n\n---\n\n## 🚀 Basic Usage\n\n```javascript\nimport Tooltip from '@atom-design-mog/tooltip';\nimport { Text } from 'react-native';\n\nexport default function Example() {\n  return (\n    <Tooltip content=\"Hello, I am a tooltip!\" position=\"top\">\n      <Text>ℹ️</Text>\n    </Tooltip>\n  );\n}\n```\n\n---\n\n## 🧩 Props\n\n| Prop         | Type                                     | Default | Description                                           |\n| ------------ | ---------------------------------------- | ------- | ----------------------------------------------------- |\n| **children** | `ReactNode`                              | —       | The anchor element that triggers the tooltip on press |\n| **content**  | `string` OR `{ title, text }`            | —       | Tooltip message or rich content object                |\n| **position** | `\"top\" \\| \"bottom\" \\| \"left\" \\| \"right\"` | `\"top\"` | Direction in which the tooltip will appear            |\n\n\n---\n\n## ✨ Features\n\n- Smart auto-positioning to avoid screen overflow\n- Supports multi-line text and rich content (title + text)\n- Arrow triangle rotates and positions correctly per direction\n- Modal-based overlay — tapping outside closes the tooltip\n- Clean UI consistent with Moglix style\n- Works with any child element (icons, text, buttons)\n- Pure React Native — zero external runtime dependencies\n\n---\n\n## 🎨 Rich Content Example\n\n```jsx\n<Tooltip\n  position=\"bottom\"\n  content={{\n    title: 'Popover Title',\n    text: \"And here's some engaging content. Very useful.\"\n  }}\n>\n  <Text>ℹ️</Text>\n</Tooltip>\n```\n\n---\n\n## 🧪 Full Test Screen Example\n\n```javascript\nimport React from 'react';\nimport { View, Text, ScrollView, StyleSheet } from 'react-native';\nimport Tooltip from '@atom-design-mog/tooltip';\n\nexport default function TestTooltipsScreen() {\n  return (\n    <ScrollView style={{ flex: 1 }}>\n      <View style={styles.container}>\n\n        {/* Top */}\n        <View style={styles.block}>\n          <Text style={styles.label}>Tooltip on Top</Text>\n          <Tooltip content=\"Tool Tip on Top\" position=\"top\">\n            <Text style={styles.icon}>ℹ️</Text>\n          </Tooltip>\n        </View>\n\n        {/* Bottom */}\n        <View style={styles.block}>\n          <Text style={styles.label}>Tooltip on Bottom</Text>\n          <Tooltip content=\"Tool Tip on Bottom\" position=\"bottom\">\n            <Text style={styles.icon}>ℹ️</Text>\n          </Tooltip>\n        </View>\n\n        {/* Left */}\n        <View style={styles.block}>\n          <Text style={styles.label}>Tooltip on Left</Text>\n          <Tooltip content=\"Tool Tip on Left\" position=\"left\">\n            <Text style={styles.icon}>ℹ️</Text>\n          </Tooltip>\n        </View>\n\n        {/* Right */}\n        <View style={styles.block}>\n          <Text style={styles.label}>Tooltip on Right</Text>\n          <Tooltip content=\"Tool Tip on Right\" position=\"right\">\n            <Text style={styles.icon}>ℹ️</Text>\n          </Tooltip>\n        </View>\n\n        {/* Long text - top */}\n        <View style={styles.block}>\n          <Text style={styles.label}>Tooltip with Long Text (Top)</Text>\n          <Tooltip\n            content=\"Tool Tip with long descriptive text to test wrapping and auto-positioning.\"\n            position=\"top\"\n          >\n            <Text style={styles.icon}>ℹ️</Text>\n          </Tooltip>\n        </View>\n\n        {/* Rich content */}\n        <View style={styles.block}>\n          <Text style={styles.label}>Tooltip with Title & Text</Text>\n          <Tooltip\n            content={{ title: 'Popover title', text: 'Some engaging explanation lives here.' }}\n            position=\"bottom\"\n          >\n            <Text style={styles.icon}>ℹ️</Text>\n          </Tooltip>\n        </View>\n\n      </View>\n    </ScrollView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: { padding: 20, gap: 40, alignItems: 'center' },\n  block: { alignItems: 'center', gap: 8 },\n  label: { fontSize: 16, fontWeight: '500', color: '#333' },\n  icon: { fontSize: 30, color: '#666' },\n});\n```\n\n---\n\n## 📌 Content Structure\n\nSimple text:\n```js\ncontent = \"Tooltip message\"\n```\n\nRich content:\n```js\ncontent = { title: \"Popover Title\", text: \"Detailed tooltip text goes here.\" }\n```\n\n---\n\n## 👤 Author\n\nAvi Gupta\n","readmeFilename":"README.md"}