React Tooltip

React Tooltip is a modern, accessible tooltip component library for React applications that provides comprehensive tooltip functionality with customizable positioning, styling, and behavior. Built with TypeScript and powered by Floating UI for advanced positioning algorithms, it offers automatic placement adjustment to avoid viewport edges, supports multiple trigger events (hover, click, focus), and includes accessibility features like ARIA attributes and keyboard navigation.

Package Information

• Package Name: react-tooltip
• Package Type: npm
• Language: TypeScript
• Installation: npm install react-tooltip

Core Imports

import { Tooltip } from "react-tooltip";

For CommonJS:

const { Tooltip } = require("react-tooltip");

Additional imports for advanced usage:

import { 
  Tooltip, 
  TooltipProvider, 
  TooltipWrapper, 
  removeStyle,
  type ITooltip,
  type PlacesType,
  type VariantType
} from "react-tooltip";

Basic Usage

import { Tooltip } from "react-tooltip";

function App() {
  return (
    <div>
      {/* Element with tooltip */}
      <button 
        data-tooltip-id="my-tooltip" 
        data-tooltip-content="Hello world!"
      >
        Hover me
      </button>
      
      {/* Tooltip component */}
      <Tooltip id="my-tooltip" />
    </div>
  );
}

For versions before 5.13.0, you must import the CSS file:

import 'react-tooltip/dist/react-tooltip.css'

Architecture

React Tooltip is built around several key components:

• Main Tooltip Component: Core Tooltip component providing full tooltip functionality
• Data Attributes System: HTML data attributes for declarative tooltip configuration
• Positioning Engine: Floating UI integration for advanced positioning with collision detection
• Event System: Flexible event handling for hover, click, focus, and custom events
• Style Injection: Automatic CSS injection with customization options
• Legacy Components: TooltipProvider and TooltipWrapper for backward compatibility

Capabilities

Main Tooltip Component

Primary tooltip component with comprehensive configuration options, imperative API, and accessibility features. Supports declarative usage via data attributes and programmatic control via ref methods.

function Tooltip(props: ITooltipController): React.ReactElement;

Main Tooltip Component

Legacy Components

Provider and wrapper components for backward compatibility with earlier versions. These components are deprecated in favor of the main Tooltip component and data attributes.

function TooltipProvider(props: { children: React.ReactNode }): React.ReactElement;
function TooltipWrapper(props: ITooltipWrapper): React.ReactElement;

Legacy Components

Styling and Utilities

Utility functions for managing tooltip styles and CSS injection. Includes functions for removing injected styles and configuring style behavior.

function removeStyle(options?: { type?: 'core' | 'base'; id?: string }): void;

Styling and Utilities

Core Types

type PlacesType = 
  | 'top' | 'top-start' | 'top-end'
  | 'right' | 'right-start' | 'right-end' 
  | 'bottom' | 'bottom-start' | 'bottom-end'
  | 'left' | 'left-start' | 'left-end';

type VariantType = 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info';

type PositionStrategy = 'absolute' | 'fixed';

type EventsType = 'hover' | 'click';

interface IPosition {
  x: number;
  y: number;
}

interface TooltipRefProps {
  open: (options?: TooltipImperativeOpenOptions) => void;
  close: (options?: TooltipImperativeCloseOptions) => void;
  readonly activeAnchor: HTMLElement | null;
  readonly place: PlacesType;
  readonly isOpen: boolean;
}

interface TooltipImperativeOpenOptions {
  anchorSelect?: string;
  position?: IPosition;
  place?: PlacesType;
  content?: ChildrenType;
  delay?: number;
}

interface TooltipImperativeCloseOptions {
  delay?: number;
}