@chainplatform/tooltip

Modern tooltip component for React Native / React Native Web.

Reusable tooltip component for React Native and React Native Web.

This package is designed for buttons, icons, labels, table actions, chart labels, list actions, and small UI elements that need a clean tooltip on both mobile and web.

Features

• React Native support
• React Native Web support
• Web hover support
• Mobile press support
• Manual trigger support
• Auto placement
• Top / bottom placement
• Prevent screen overflow
• Click outside to close on mobile
• Web hover close using global mousemove
• Does not block button click on web
• Works inside small containers
• Works inside table rows, cards, and views with limited size
• Custom content support
• Dark modern UI
• Arrow indicator
• Shadow and border style
• Built with class component
• Uses Modal to avoid parent clipping

Install

npm install @chainplatform/tooltip prop-types @chainplatform/layout --save

or:

yarn add @chainplatform/tooltip prop-types @chainplatform/layout

Basic Usage

import React from 'react';
import { Text } from 'react-native';
import Tooltip from '@chainplatform/tooltip';

export default function Example() {
    return (
        <Tooltip
            title="Information"
            text="This is a tooltip component"
        >
            <Text>Hover me</Text>
        </Tooltip>
    );
}

Web Hover / Mobile Press

By default, trigger="auto" is used.

Web    => hover
Mobile => press

<Tooltip
    title="Skill"
    text="Listening skill"
>
    <Text>Listening</Text>
</Tooltip>

Same as:

<Tooltip
    trigger="auto"
    title="Skill"
    text="Listening skill"
>
    <Text>Listening</Text>
</Tooltip>

Tooltip With Title, Text And Value

<Tooltip
    title="GPA"
    text="Điểm trung bình học tập"
    value="8.5 / 10"
>
    <Text>GPA</Text>
</Tooltip>

Tooltip With Icon

import Tooltip from '@chainplatform/tooltip';
import EditSVG from './EditSVG';

<Tooltip
    title="Edit"
    text="Edit this item"
    value="Active"
>
    <EditSVG width={20} color="#2563EB" />
</Tooltip>

Tooltip With Custom Color Dot

<Tooltip
    title="Passed"
    text="Student passed this exam"
    value="70%"
    color="#10B981"
>
    <Text>Status</Text>
</Tooltip>

Custom Content

Use content when you need a fully custom tooltip body.

import React from 'react';
import { Text, View } from 'react-native';
import Tooltip from '@chainplatform/tooltip';

<Tooltip
    content={
        <View>
            <Text
                style={{
                    color: '#FFFFFF',
                    fontWeight: '700',
                    marginBottom: 4,
                }}
            >
                Student A
            </Text>

            <Text
                style={{
                    color: '#D1D5DB',
                    fontSize: 12,
                }}
            >
                Average score: 8.7
            </Text>
        </View>
    }
>
    <Text>Profile</Text>
</Tooltip>

Placement

Auto Placement

placement="auto" chooses top or bottom based on available screen space.

<Tooltip
    placement="auto"
    title="Auto Tooltip"
    text="Tooltip will choose the best position"
>
    <Text>Auto</Text>
</Tooltip>

Top Placement

<Tooltip
    placement="top"
    title="Top Tooltip"
>
    <Text>Top</Text>
</Tooltip>

Bottom Placement

<Tooltip
    placement="bottom"
    title="Bottom Tooltip"
>
    <Text>Bottom</Text>
</Tooltip>

Trigger Types

auto

<Tooltip trigger="auto" />

Behavior:

Web    => onMouseEnter
Mobile => onPress

hover

<Tooltip
    trigger="hover"
    title="Hover only"
>
    <Text>Hover</Text>
</Tooltip>

hover is only active on web.

press

<Tooltip
    trigger="press"
    title="Press tooltip"
>
    <Text>Press</Text>
</Tooltip>

press works by pressing the child element.

manual

Use manual when the parent controls the tooltip.

This is recommended when the tooltip is inside a parent Pressable.

<Tooltip
    ref={tooltipRef}
    trigger="manual"
    title="Manual Tooltip"
>
    <Text>Manual</Text>
</Tooltip>

Methods

When using ref, the tooltip exposes these methods:

show

tooltipRef.current?.show();

hide

tooltipRef.current?.hide();

toggle

tooltipRef.current?.toggle();

Tooltip Inside Parent Pressable

When the tooltip is inside a parent Pressable, use trigger="manual" so the parent press behavior is preserved.

import React from 'react';
import { Pressable } from 'react-native';
import Tooltip from '@chainplatform/tooltip';
import EditSVG from './EditSVG';

export default class Example extends React.PureComponent {

    tooltipRef = React.createRef();

    onPress = () => {
        this.tooltipRef.current?.toggle();

        console.log('parent press vẫn chạy');
    };

    render() {
        return (
            <Pressable onPress={this.onPress}>
                <Tooltip
                    ref={this.tooltipRef}
                    trigger="manual"
                    title="Edit"
                    text="Edit this item"
                    value="Active"
                >
                    <EditSVG width={20} color="#2563EB" />
                </Tooltip>
            </Pressable>
        );
    }
}

Table Action Example

import React, { PureComponent } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
import Tooltip from '@chainplatform/tooltip';
import { setSize } from '@chainplatform/layout';
import EditSVG from './EditSVG';

export default class SkillsItem extends PureComponent {

    tooltipRef = React.createRef();

    onEdit = item => {
        this.tooltipRef.current?.toggle();

        const newItem = {
            id: item?.value || 0,
        };

        console.log(newItem);
    };

    render() {
        const { item, theme } = this.props;

        return (
            <View style={styles.row}>
                <Text style={styles.name}>
                    {item?.label}
                </Text>

                <Pressable onPress={() => this.onEdit(item)}>
                    <Tooltip
                        ref={this.tooltipRef}
                        trigger="manual"
                        title="Thông tin"
                        text="Tooltip được bật từ Pressable cha"
                        value="Active"
                    >
                        <EditSVG
                            width={setSize(20)}
                            color={theme?.colors?.primary}
                        />
                    </Tooltip>
                </Pressable>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    row: {
        minHeight: setSize(40),
        flexDirection: 'row',
        alignItems: 'center',
    },
    name: {
        flex: 1,
        fontSize: setSize(13),
    },
});

Styling Example

<Tooltip
    title="Custom Style"
    text="You can customize tooltip style"
    value="Styled"
    color="#10B981"
    tooltipStyle={{
        backgroundColor: '#020617',
        borderColor: 'rgba(255,255,255,0.12)',
    }}
    arrowStyle={{
        backgroundColor: '#020617',
    }}
    titleStyle={{
        color: '#FFFFFF',
    }}
    textStyle={{
        color: '#CBD5E1',
    }}
    valueStyle={{
        color: '#FACC15',
    }}
>
    <Text>Custom Tooltip</Text>
</Tooltip>

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | trigger | 'auto' \| 'hover' \| 'press' \| 'manual' | 'auto' | Tooltip trigger behavior | | placement | 'auto' \| 'top' \| 'bottom' | 'auto' | Tooltip placement | | title | string \| number | '' | Tooltip title | | text | string \| number | '' | Tooltip description | | value | string \| number | '' | Tooltip value text | | color | string | '#3B82F6' | Dot color near title | | content | ReactNode | null | Custom tooltip content | | children | ReactNode | required | Tooltip trigger element | | tooltipWidth | number | setSize(220) | Tooltip width | | offset | number | setSize(8) | Space between trigger and tooltip | | screenPadding | number | setSize(8) | Minimum distance from screen edge | | hoverSafeArea | number | setSize(10) | Safe hover area on web | | style | object \| array | null | Wrapper style | | tooltipStyle | object \| array | null | Tooltip container style | | arrowStyle | object \| array | null | Tooltip arrow style | | overlayStyle | object \| array | null | Modal overlay style | | titleStyle | object \| array | null | Title text style | | textStyle | object \| array | null | Description text style | | valueStyle | object \| array | null | Value text style |

Default Props

Tooltip.defaultProps = {
    trigger: 'auto',
    placement: 'auto',
    title: '',
    text: '',
    value: '',
    color: '#3B82F6',
    content: null,
    style: null,
    tooltipStyle: null,
    arrowStyle: null,
    overlayStyle: null,
    titleStyle: null,
    textStyle: null,
    valueStyle: null,
    offset: setSize(8),
    tooltipWidth: setSize(220),
    screenPadding: setSize(8),
    hoverSafeArea: setSize(10),
};

Platform Behavior

Web

• Default trigger is hover.
• Tooltip opens on onMouseEnter.
• Tooltip closes when mouse leaves the target and tooltip safe area.
• Tooltip uses Modal.
• Overlay uses pointerEvents="none" so buttons underneath can still be clicked.
• Position is calculated with measureInWindow.

iOS / Android

• Default trigger is press.
• Tooltip opens on press.
• Tooltip closes when pressing outside.
• Tooltip uses Modal transparent.
• Position is calculated with measureInWindow.

Why Modal?

Tooltip is rendered with Modal to avoid being clipped by parent containers.

This helps when the tooltip is inside:

• Small table cells
• ScrollView
• FlatList rows
• Cards
• Containers with limited width or height
• Containers with overflow: hidden

Notes

Parent Pressable

If the tooltip is inside a parent Pressable, use:

trigger="manual"

Then control it from the parent:

tooltipRef.current?.toggle();

This keeps the parent Pressable working normally.

Web Click Behavior

On web, the tooltip overlay uses:

pointerEvents="none"

This prevents the tooltip modal overlay from blocking clicks on buttons underneath.

Hover Close Behavior

On web, tooltip close is handled by a global mousemove listener.

The tooltip stays open while the mouse is inside:

• The trigger area
• The tooltip area
• The configured hoverSafeArea

Package Structure

@chainplatform/tooltip
├── src
│   ├── Tooltip.js
│   └── index.js
├── package.json
├── README.md
└── LICENSE

index.js

import Tooltip from './Tooltip';

export {
    Tooltip,
};

export default Tooltip;

🪪 License

MIT © 2026 Chain Platform

💖 Support & Donate

If you find this package helpful, consider supporting the development:

| Currency | Address | |----------------|----------| | MB Bank | MB Bank | | Bitcoin (BTC) | 17grbSNSEcEybS1nHh4TGYVodBwT16cWtc | | Ethereum (ETH) | 0xa2fd119a619908d53928e5848b49bf1cc15689d4 | | Tron (TRX) | TYL8p2PLCLDfq3CgGBp58WdUvvg9zsJ8pd | | DOGE (DOGE) | DDfKN2ys4frNaUkvPKcAdfL6SiVss5Bm19 | | USDT (SOLANA) | cPUZsb7T9tMfiZFqXbWbRvrUktxgZQXQ2Ni1HiVXgFm |

Your contribution helps maintain open-source development under the Chain Platform ecosystem 🚀