{"_id":"@atom_design/tooltip","name":"@atom_design/tooltip","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atom_design/tooltip","version":"1.0.0","description":"A customizable React Native tooltip component with smart positioning, animations, and rich content support.","main":"index.js","types":"index.d.ts","author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","tooltip","popover","ui-component","overlay","atom-design","accessible"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","prop-types":">=15.0.0"},"_id":"@atom_design/tooltip@1.0.0","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-d2urBtdzbRKlisL+XFM6PHGqn3Vy8prhTi7RwSBA09el2k1GtvTKdxg+xXozeXPVBUncm6YTDdzjiRcn5vmEag==","shasum":"da8d32cef2400376726d2bd80241a21662f37f80","tarball":"https://registry.npmjs.org/@atom_design/tooltip/-/tooltip-1.0.0.tgz","fileCount":5,"unpackedSize":30030,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF+cOlJTfrMyOvCCBackn4kYR0YBKrHzj6RdxcnPU6tjAiBs8d0Z7Fk/bDmWiw4l63h6fHOo/k6vFRQ46esV8Kn4Pg=="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tooltip_1.0.0_1764743688374_0.6491393645593169"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T06:34:48.317Z","1.0.0":"2025-12-03T06:34:48.565Z","modified":"2025-12-03T06:34:48.836Z"},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"description":"A customizable React Native tooltip component with smart positioning, animations, and rich content support.","keywords":["react-native","tooltip","popover","ui-component","overlay","atom-design","accessible"],"author":{"name":"Atom Design"},"license":"MIT","readme":"# @atom_design/tooltip\n\nA highly customizable, accessible React Native Tooltip component with smart positioning, smooth animations, and support for rich content.\n\n## Features\n\n- 📍 **4 Positions**: top, bottom, left, right\n- 🎯 **Smart Positioning**: Auto-adjusts to stay within screen bounds\n- 🎬 **Smooth Animations**: Fade in/out with customizable duration\n- 📝 **Rich Content**: String, title+text, or custom components\n- 🎨 **Fully Customizable**: Colors, sizes, styles\n- ♿ **Accessible**: Full accessibility support\n- 🎯 **TypeScript**: Full TypeScript definitions included\n- 📱 **Cross-Platform**: Works on iOS and Android\n\n## Installation\n\n```bash\nnpm install @atom_design/tooltip\n# or\nyarn add @atom_design/tooltip\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-native prop-types\n```\n\n## Usage\n\n### Basic Usage\n\n```jsx\nimport Tooltip from '@atom_design/tooltip';\nimport { Text } from 'react-native';\n\n<Tooltip content=\"Hello, I am a tooltip!\">\n  <Text>ℹ️ Tap me</Text>\n</Tooltip>\n```\n\n### Positions\n\n```jsx\n<Tooltip content=\"Top tooltip\" position=\"top\">\n  <Text>Top</Text>\n</Tooltip>\n\n<Tooltip content=\"Bottom tooltip\" position=\"bottom\">\n  <Text>Bottom</Text>\n</Tooltip>\n\n<Tooltip content=\"Left tooltip\" position=\"left\">\n  <Text>Left</Text>\n</Tooltip>\n\n<Tooltip content=\"Right tooltip\" position=\"right\">\n  <Text>Right</Text>\n</Tooltip>\n```\n\n### Rich Content (Title + Text)\n\n```jsx\n<Tooltip\n  content={{\n    title: 'Popover Title',\n    text: 'This is the detailed description that appears below the title.',\n  }}\n  position=\"bottom\"\n>\n  <Text>ℹ️</Text>\n</Tooltip>\n```\n\n### Custom Component Content\n\n```jsx\n<Tooltip\n  content={{\n    title: 'Actions',\n    component: (\n      <View style={{ flexDirection: 'row', gap: 10, marginTop: 10 }}>\n        <Button title=\"Edit\" onPress={() => {}} />\n        <Button title=\"Delete\" onPress={() => {}} />\n      </View>\n    ),\n  }}\n>\n  <Text>⋮</Text>\n</Tooltip>\n```\n\n### Custom Colors\n\n```jsx\n// Dark tooltip\n<Tooltip\n  content=\"Dark themed tooltip\"\n  backgroundColor=\"#333\"\n  textColor=\"#fff\"\n>\n  <Text>Dark</Text>\n</Tooltip>\n\n// Brand colored\n<Tooltip\n  content=\"Brand tooltip\"\n  backgroundColor=\"#d9232d\"\n  textColor=\"#fff\"\n>\n  <Text>Brand</Text>\n</Tooltip>\n```\n\n### Custom Styling\n\n```jsx\n<Tooltip\n  content=\"Styled tooltip\"\n  tooltipStyle={{\n    borderRadius: 12,\n    padding: 16,\n    borderWidth: 1,\n    borderColor: '#ddd',\n  }}\n  textStyle={{\n    fontSize: 16,\n    fontWeight: '500',\n  }}\n>\n  <Text>Styled</Text>\n</Tooltip>\n```\n\n### Without Arrow\n\n```jsx\n<Tooltip content=\"No arrow\" showArrow={false}>\n  <Text>No Arrow</Text>\n</Tooltip>\n```\n\n### With Overlay\n\n```jsx\n<Tooltip\n  content=\"Dimmed background\"\n  overlayColor=\"rgba(0,0,0,0.3)\"\n>\n  <Text>With Overlay</Text>\n</Tooltip>\n```\n\n### Callbacks\n\n```jsx\n<Tooltip\n  content=\"Tracked tooltip\"\n  onShow={() => console.log('Tooltip shown')}\n  onHide={() => console.log('Tooltip hidden')}\n>\n  <Text>Tracked</Text>\n</Tooltip>\n```\n\n### Disabled State\n\n```jsx\n<Tooltip content=\"Won't show\" disabled={true}>\n  <Text>Disabled</Text>\n</Tooltip>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `children` | `ReactNode` | - | Trigger element (required) |\n| `content` | `string \\| TooltipContent \\| ReactNode` | - | Tooltip content |\n| `position` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'top'` | Tooltip position |\n| `backgroundColor` | `string` | `'#fff'` | Background color |\n| `textColor` | `string` | `'#333'` | Text color |\n| `arrowSize` | `number` | `6` | Arrow size in pixels |\n| `maxWidth` | `number` | `250` | Maximum tooltip width |\n| `disabled` | `boolean` | `false` | Disable tooltip |\n| `showArrow` | `boolean` | `true` | Show/hide arrow |\n| `animationDuration` | `number` | `200` | Animation duration (ms) |\n| `onShow` | `() => void` | - | Callback when shown |\n| `onHide` | `() => void` | - | Callback when hidden |\n| `containerStyle` | `StyleProp<ViewStyle>` | - | Container style |\n| `tooltipStyle` | `StyleProp<ViewStyle>` | - | Tooltip box style |\n| `textStyle` | `StyleProp<TextStyle>` | - | Text style |\n| `titleStyle` | `StyleProp<TextStyle>` | - | Title style |\n| `overlayColor` | `string` | `'transparent'` | Overlay background |\n| `closeOnOverlayPress` | `boolean` | `true` | Close on overlay tap |\n| `testID` | `string` | - | Test ID |\n| `accessibilityLabel` | `string` | - | A11y label |\n\n### TooltipContent Interface\n\n```typescript\ninterface TooltipContent {\n  title?: string;      // Bold title text\n  text?: string;       // Body text\n  component?: ReactNode; // Custom component\n}\n```\n\n## Accessibility\n\nThe Tooltip component is fully accessible:\n\n- Uses `accessibilityRole=\"button\"` for trigger\n- Uses `accessibilityRole=\"tooltip\"` for content\n- Announces expanded state\n- Provides interaction hints\n- Uses `accessibilityLiveRegion=\"polite\"` for content\n\n## Full Test Screen Example\n\nCopy this complete screen to test all tooltip variations in your app:\n\n```jsx\nimport React, { useState } from 'react';\nimport { ScrollView, View, Text, StyleSheet, Button } from 'react-native';\nimport Tooltip from '@atom_design/tooltip';\n\nconst TooltipTestScreen = () => {\n  const [showCount, setShowCount] = useState(0);\n\n  return (\n    <ScrollView style={styles.container} contentContainerStyle={styles.content}>\n      <Text style={styles.title}>@atom_design/tooltip</Text>\n      <Text style={styles.subtitle}>Complete Component Test</Text>\n\n      {/* POSITIONS SECTION */}\n      <Text style={styles.sectionTitle}>Positions</Text>\n      <View style={styles.positionsGrid}>\n        <View style={styles.positionRow}>\n          <Tooltip content=\"Tooltip on Top\" position=\"top\">\n            <View style={styles.trigger}>\n              <Text style={styles.triggerText}>Top</Text>\n            </View>\n          </Tooltip>\n        </View>\n\n        <View style={styles.positionRow}>\n          <Tooltip content=\"Tooltip on Left\" position=\"left\">\n            <View style={styles.trigger}>\n              <Text style={styles.triggerText}>Left</Text>\n            </View>\n          </Tooltip>\n\n          <View style={{ width: 60 }} />\n\n          <Tooltip content=\"Tooltip on Right\" position=\"right\">\n            <View style={styles.trigger}>\n              <Text style={styles.triggerText}>Right</Text>\n            </View>\n          </Tooltip>\n        </View>\n\n        <View style={styles.positionRow}>\n          <Tooltip content=\"Tooltip on Bottom\" position=\"bottom\">\n            <View style={styles.trigger}>\n              <Text style={styles.triggerText}>Bottom</Text>\n            </View>\n          </Tooltip>\n        </View>\n      </View>\n\n      {/* CONTENT TYPES SECTION */}\n      <Text style={styles.sectionTitle}>Content Types</Text>\n\n      <View style={styles.row}>\n        <Tooltip content=\"Simple text tooltip\">\n          <View style={styles.iconTrigger}>\n            <Text style={styles.icon}>ℹ️</Text>\n            <Text style={styles.label}>Simple Text</Text>\n          </View>\n        </Tooltip>\n\n        <Tooltip\n          content={{\n            title: 'Popover Title',\n            text: 'This is the detailed description that provides more context.',\n          }}\n        >\n          <View style={styles.iconTrigger}>\n            <Text style={styles.icon}>📋</Text>\n            <Text style={styles.label}>Title + Text</Text>\n          </View>\n        </Tooltip>\n      </View>\n\n      <Text style={styles.label}>Long Text Content</Text>\n      <Tooltip\n        content=\"This is a much longer tooltip text that demonstrates how the tooltip handles wrapping and stays within screen boundaries. It should be easy to read and not overflow.\"\n        position=\"bottom\"\n      >\n        <View style={styles.longTrigger}>\n          <Text>Tap to see long tooltip</Text>\n        </View>\n      </Tooltip>\n\n      <Text style={styles.label}>Custom Component</Text>\n      <Tooltip\n        content={{\n          title: 'Quick Actions',\n          component: (\n            <View style={styles.customContent}>\n              <Text style={styles.customAction}>✏️ Edit</Text>\n              <Text style={styles.customAction}>📋 Copy</Text>\n              <Text style={styles.customAction}>🗑️ Delete</Text>\n            </View>\n          ),\n        }}\n        position=\"bottom\"\n        maxWidth={180}\n      >\n        <View style={styles.longTrigger}>\n          <Text>⋮ More Actions</Text>\n        </View>\n      </Tooltip>\n\n      {/* COLORS SECTION */}\n      <Text style={styles.sectionTitle}>Custom Colors</Text>\n      <View style={styles.row}>\n        <Tooltip\n          content=\"Dark tooltip\"\n          backgroundColor=\"#333\"\n          textColor=\"#fff\"\n        >\n          <View style={[styles.trigger, { backgroundColor: '#333' }]}>\n            <Text style={[styles.triggerText, { color: '#fff' }]}>Dark</Text>\n          </View>\n        </Tooltip>\n\n        <Tooltip\n          content=\"Brand tooltip\"\n          backgroundColor=\"#d9232d\"\n          textColor=\"#fff\"\n        >\n          <View style={[styles.trigger, { backgroundColor: '#d9232d' }]}>\n            <Text style={[styles.triggerText, { color: '#fff' }]}>Brand</Text>\n          </View>\n        </Tooltip>\n\n        <Tooltip\n          content=\"Success tooltip\"\n          backgroundColor=\"#34C759\"\n          textColor=\"#fff\"\n        >\n          <View style={[styles.trigger, { backgroundColor: '#34C759' }]}>\n            <Text style={[styles.triggerText, { color: '#fff' }]}>Success</Text>\n          </View>\n        </Tooltip>\n      </View>\n\n      <View style={styles.row}>\n        <Tooltip\n          content=\"Info tooltip\"\n          backgroundColor=\"#007AFF\"\n          textColor=\"#fff\"\n        >\n          <View style={[styles.trigger, { backgroundColor: '#007AFF' }]}>\n            <Text style={[styles.triggerText, { color: '#fff' }]}>Info</Text>\n          </View>\n        </Tooltip>\n\n        <Tooltip\n          content=\"Warning tooltip\"\n          backgroundColor=\"#FF9500\"\n          textColor=\"#fff\"\n        >\n          <View style={[styles.trigger, { backgroundColor: '#FF9500' }]}>\n            <Text style={[styles.triggerText, { color: '#fff' }]}>Warning</Text>\n          </View>\n        </Tooltip>\n      </View>\n\n      {/* STYLING SECTION */}\n      <Text style={styles.sectionTitle}>Styling Options</Text>\n\n      <View style={styles.row}>\n        <Tooltip content=\"No arrow pointer\" showArrow={false}>\n          <View style={styles.trigger}>\n            <Text style={styles.triggerText}>No Arrow</Text>\n          </View>\n        </Tooltip>\n\n        <Tooltip content=\"Large arrow\" arrowSize={10}>\n          <View style={styles.trigger}>\n            <Text style={styles.triggerText}>Big Arrow</Text>\n          </View>\n        </Tooltip>\n      </View>\n\n      <View style={styles.row}>\n        <Tooltip\n          content=\"With overlay background\"\n          overlayColor=\"rgba(0,0,0,0.3)\"\n        >\n          <View style={styles.trigger}>\n            <Text style={styles.triggerText}>Overlay</Text>\n          </View>\n        </Tooltip>\n\n        <Tooltip\n          content=\"Custom styled tooltip\"\n          tooltipStyle={{\n            borderRadius: 16,\n            borderWidth: 2,\n            borderColor: '#d9232d',\n          }}\n          textStyle={{\n            fontWeight: 'bold',\n            color: '#d9232d',\n          }}\n        >\n          <View style={styles.trigger}>\n            <Text style={styles.triggerText}>Styled</Text>\n          </View>\n        </Tooltip>\n      </View>\n\n      {/* CALLBACKS SECTION */}\n      <Text style={styles.sectionTitle}>Callbacks</Text>\n      <Text style={styles.info}>Tooltip shown: {showCount} times</Text>\n      <Tooltip\n        content=\"This tooltip tracks when it's shown\"\n        onShow={() => setShowCount(prev => prev + 1)}\n        onHide={() => console.log('Hidden')}\n      >\n        <View style={styles.longTrigger}>\n          <Text>Tap to increment counter</Text>\n        </View>\n      </Tooltip>\n\n      {/* STATES SECTION */}\n      <Text style={styles.sectionTitle}>States</Text>\n      <View style={styles.row}>\n        <Tooltip content=\"Normal tooltip\">\n          <View style={styles.trigger}>\n            <Text style={styles.triggerText}>Normal</Text>\n          </View>\n        </Tooltip>\n\n        <Tooltip content=\"Won't show\" disabled={true}>\n          <View style={[styles.trigger, styles.disabledTrigger]}>\n            <Text style={[styles.triggerText, { color: '#999' }]}>Disabled</Text>\n          </View>\n        </Tooltip>\n      </View>\n\n      {/* EDGE CASES SECTION */}\n      <Text style={styles.sectionTitle}>Edge Cases</Text>\n\n      <Text style={styles.label}>Near Screen Edge (Left)</Text>\n      <View style={{ alignItems: 'flex-start' }}>\n        <Tooltip content=\"This tooltip adjusts to stay on screen\" position=\"top\">\n          <View style={styles.trigger}>\n            <Text style={styles.triggerText}>Edge</Text>\n          </View>\n        </Tooltip>\n      </View>\n\n      <Text style={styles.label}>Near Screen Edge (Right)</Text>\n      <View style={{ alignItems: 'flex-end' }}>\n        <Tooltip content=\"This tooltip adjusts to stay on screen\" position=\"top\">\n          <View style={styles.trigger}>\n            <Text style={styles.triggerText}>Edge</Text>\n          </View>\n        </Tooltip>\n      </View>\n\n      <View style={{ height: 100 }} />\n    </ScrollView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n  },\n  content: {\n    padding: 20,\n  },\n  title: {\n    fontSize: 28,\n    fontWeight: 'bold',\n    textAlign: 'center',\n    marginBottom: 5,\n    color: '#333',\n  },\n  subtitle: {\n    fontSize: 16,\n    textAlign: 'center',\n    marginBottom: 30,\n    color: '#666',\n  },\n  sectionTitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    marginTop: 30,\n    marginBottom: 15,\n    color: '#333',\n    borderBottomWidth: 1,\n    borderBottomColor: '#ddd',\n    paddingBottom: 5,\n  },\n  label: {\n    fontSize: 14,\n    color: '#666',\n    marginBottom: 8,\n    marginTop: 15,\n  },\n  info: {\n    fontSize: 14,\n    color: '#666',\n    marginBottom: 10,\n    fontFamily: 'monospace',\n  },\n  row: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    gap: 15,\n    marginBottom: 10,\n  },\n  positionsGrid: {\n    alignItems: 'center',\n    gap: 20,\n    paddingVertical: 20,\n  },\n  positionRow: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  trigger: {\n    backgroundColor: '#e0e0e0',\n    paddingVertical: 10,\n    paddingHorizontal: 16,\n    borderRadius: 8,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  triggerText: {\n    fontSize: 14,\n    fontWeight: '600',\n    color: '#333',\n  },\n  iconTrigger: {\n    alignItems: 'center',\n    gap: 5,\n  },\n  icon: {\n    fontSize: 30,\n  },\n  longTrigger: {\n    backgroundColor: '#e0e0e0',\n    padding: 16,\n    borderRadius: 8,\n    alignItems: 'center',\n  },\n  disabledTrigger: {\n    backgroundColor: '#f0f0f0',\n    opacity: 0.6,\n  },\n  customContent: {\n    marginTop: 10,\n    gap: 8,\n  },\n  customAction: {\n    fontSize: 14,\n    paddingVertical: 4,\n  },\n});\n\nexport default TooltipTestScreen;\n```\n\n### Usage in Your App\n\n```jsx\n// App.js or navigation screen\nimport TooltipTestScreen from './TooltipTestScreen';\n\n// In your navigator or directly\n<TooltipTestScreen />\n```\n\n## License\n\nMIT © Atom Design\n","readmeFilename":"README.md","_rev":"1-60d6628b0c7b81a42dc081e8668b1cf8"}