@sb/tooltip

A flexible and interactive Tooltip component for React web and React Native applications. Part of the sports-betting-monorepo UI library.

Installation

npm install @sb/tooltip

Features

• 📍 4 Placement options: top, bottom, left, right
• ⚡ 4 Trigger modes: hover, click, focus, manual
• ✨ Smooth animations: fade, scale, none
• 🎨 Semantic variants: info, success, warning, error
• 🎯 Customizable pointer directions: left, right, center
• ❌ Optional close button for manual dismissal
• 🚀 Cross-platform: Works on Web and React Native
• 🔧 Accessible and keyboard-friendly

Basic Usage

Web

import { Tooltip } from '@sb/tooltip';

function App() {
  return (
    <Tooltip 
      id="settings-tooltip"
      content="Adjust your settings" 
      placement="top"
    >
      <button>Settings</button>
    </Tooltip>
  );
}

React Native

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

function MyScreen() {
  return (
    <Tooltip 
      id="info-tooltip"
      content="Extra information here" 
      trigger="click"
    >
      <Text>Click for info</Text>
    </Tooltip>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | id | string | required | Unique identifier | | content | string \| ReactNode | required | Tooltip content | | placement | 'top' \| 'bottom' \| 'left' \| 'right' | 'top' | Preferred position | | trigger | 'hover' \| 'click' \| 'focus' \| 'manual' | 'hover' | Activation trigger | | variant | 'info' \| 'success' \| 'warning' \| 'error' | - | Semantic visual style | | animation | 'fade' \| 'scale' \| 'none' | 'fade' | Entrance animation | | delay | number | 0 | Delay in ms before appearing | | arrow | boolean | true | Show the pointer arrow | | closeButton | boolean | false | Show a close icon | | disabled | boolean | false | Disable the tooltip | | maxWidth | string \| number | - | Max width of tooltip box |

Documentation

• DEVELOPMENT.md - Contributor guide
• PUBLISH_GUIDE.md - Publishing instructions
• EXAMPLE.md - More examples

License

MIT