@atom-design-mog/tooltip

A 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.

📦 Installation

Install with npm:

npm install @atom-design-mog/tooltip

Or with yarn:

yarn add @atom-design-mog/tooltip

🚀 Basic Usage

import Tooltip from '@atom-design-mog/tooltip';
import { Text } from 'react-native';

export default function Example() {
  return (
    <Tooltip content="Hello, I am a tooltip!" position="top">
      <Text>ℹ️</Text>
    </Tooltip>
  );
}

🧩 Props

| Prop | Type | Default | Description | | ------------ | ---------------------------------------- | ------- | ----------------------------------------------------- | | children | ReactNode | — | The anchor element that triggers the tooltip on press | | content | string OR { title, text } | — | Tooltip message or rich content object | | position | "top" \| "bottom" \| "left" \| "right" | "top" | Direction in which the tooltip will appear |

✨ Features

• Smart auto-positioning to avoid screen overflow
• Supports multi-line text and rich content (title + text)
• Arrow triangle rotates and positions correctly per direction
• Modal-based overlay — tapping outside closes the tooltip
• Clean UI consistent with Moglix style
• Works with any child element (icons, text, buttons)
• Pure React Native — zero external runtime dependencies

🎨 Rich Content Example

<Tooltip
  position="bottom"
  content={{
    title: 'Popover Title',
    text: "And here's some engaging content. Very useful."
  }}
>
  <Text>ℹ️</Text>
</Tooltip>

🧪 Full Test Screen Example

import React from 'react';
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import Tooltip from '@atom-design-mog/tooltip';

export default function TestTooltipsScreen() {
  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={styles.container}>

        {/* Top */}
        <View style={styles.block}>
          <Text style={styles.label}>Tooltip on Top</Text>
          <Tooltip content="Tool Tip on Top" position="top">
            <Text style={styles.icon}>ℹ️</Text>
          </Tooltip>
        </View>

        {/* Bottom */}
        <View style={styles.block}>
          <Text style={styles.label}>Tooltip on Bottom</Text>
          <Tooltip content="Tool Tip on Bottom" position="bottom">
            <Text style={styles.icon}>ℹ️</Text>
          </Tooltip>
        </View>

        {/* Left */}
        <View style={styles.block}>
          <Text style={styles.label}>Tooltip on Left</Text>
          <Tooltip content="Tool Tip on Left" position="left">
            <Text style={styles.icon}>ℹ️</Text>
          </Tooltip>
        </View>

        {/* Right */}
        <View style={styles.block}>
          <Text style={styles.label}>Tooltip on Right</Text>
          <Tooltip content="Tool Tip on Right" position="right">
            <Text style={styles.icon}>ℹ️</Text>
          </Tooltip>
        </View>

        {/* Long text - top */}
        <View style={styles.block}>
          <Text style={styles.label}>Tooltip with Long Text (Top)</Text>
          <Tooltip
            content="Tool Tip with long descriptive text to test wrapping and auto-positioning."
            position="top"
          >
            <Text style={styles.icon}>ℹ️</Text>
          </Tooltip>
        </View>

        {/* Rich content */}
        <View style={styles.block}>
          <Text style={styles.label}>Tooltip with Title & Text</Text>
          <Tooltip
            content={{ title: 'Popover title', text: 'Some engaging explanation lives here.' }}
            position="bottom"
          >
            <Text style={styles.icon}>ℹ️</Text>
          </Tooltip>
        </View>

      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, gap: 40, alignItems: 'center' },
  block: { alignItems: 'center', gap: 8 },
  label: { fontSize: 16, fontWeight: '500', color: '#333' },
  icon: { fontSize: 30, color: '#666' },
});

📌 Content Structure

Simple text:

content = "Tooltip message"

Rich content:

content = { title: "Popover Title", text: "Detailed tooltip text goes here." }

👤 Author

Avi Gupta