or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

default-rendering.mdheadless-rendering.mdindex.mdsingleton-mode.md
tile.json

tessl/npm-tippyjs--react

React component wrapper for Tippy.js providing complete tooltip, popover, dropdown, and menu solution for the web

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tippyjs/react@4.2.x

To install, run

npx @tessl/cli install tessl/npm-tippyjs--react@4.2.0

index.mddocs/

Tippy.js for React

Tippy.js for React is a comprehensive React wrapper for Tippy.js, providing the complete tooltip, popover, dropdown, and menu solution for the web. It offers two rendering approaches: default DOM rendering with built-in CSS for out-of-the-box functionality, and headless rendering for full integration with CSS-in-JS libraries and design systems.

Package Information

  • Package Name: @tippyjs/react
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install @tippyjs/react or yarn add @tippyjs/react

Core Imports

Default Tippy with built-in rendering:

import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css'; // optional CSS

Headless Tippy for custom rendering:

import Tippy from '@tippyjs/react/headless';

Singleton hook for performance optimization:

import Tippy, { useSingleton } from '@tippyjs/react';

Core Tippy.js access:

import { tippy } from '@tippyjs/react';

Basic Usage

import React from 'react';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';

function App() {
  return (
    <Tippy content="Hello world" placement="top" arrow={true}>
      <button>Hover me</button>
    </Tippy>
  );
}

Architecture

Tippy.js for React is built around several key components:

  • Default Rendering: Complete tooltip implementation with built-in DOM rendering and CSS
  • Headless Rendering: Custom render function approach for CSS-in-JS and design system integration
  • Controlled Mode: React state-driven visibility control for programmatic tooltip management
  • Singleton Mode: Performance optimization technique for multiple tooltips sharing a single instance
  • Plugin System: Support for Tippy.js plugins and extensions for advanced functionality
  • Forward Ref Support: Proper React ref forwarding for component composition

Capabilities

Default Rendering

Complete tooltip implementation with built-in DOM rendering, styling, and animations. Perfect for quick integration with minimal setup.

interface TippyProps extends Partial<Omit<Props, 'content' | 'render'>> {
  children?: React.ReactElement<any>;
  content?: React.ReactNode;
  visible?: boolean;
  disabled?: boolean;
  className?: string;
  singleton?: SingletonObject;
  reference?: React.RefObject<Element> | Element | null;
  ref?: React.Ref<Element>;
}

declare const Tippy: React.ForwardRefExoticComponent<TippyProps>;

Default Rendering

Headless Rendering

Custom render function approach for complete control over tooltip appearance and behavior. Ideal for CSS-in-JS libraries and design systems.

interface TippyProps {
  render?: (
    attrs: {
      'data-placement': Placement;
      'data-reference-hidden'?: string;
      'data-escaped'?: string;
    },
    content?: React.ReactNode,
    instance?: Instance
  ) => React.ReactNode;
}

Headless Rendering

Singleton Mode

Performance optimization technique for multiple tooltips that share a single instance, reducing memory usage and improving performance.

interface UseSingletonProps {
  disabled?: boolean;
  overrides?: Array<keyof Props>;
}

function useSingleton(
  props?: UseSingletonProps
): [SingletonObject, SingletonObject];

interface SingletonObject {
  data?: any;
  hook(args: SingletonHookArgs): void;
}

interface SingletonHookArgs {
  instance: Instance;
  content: React.ReactNode;
  props: Props;
}

Singleton Mode

Core Tippy.js Access

Direct access to the core Tippy.js functionality for advanced use cases and imperative API usage.

export const tippy: typeof tippyCore;

The tippy export provides direct access to the core Tippy.js library, allowing you to create tooltips imperatively or access advanced features not exposed through the React component API.

Usage Examples:

import { tippy } from '@tippyjs/react';

// Create tooltip imperatively
function ImperativeTooltip() {
  const buttonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (buttonRef.current) {
      const instance = tippy(buttonRef.current, {
        content: 'Imperative tooltip',
        placement: 'top',
      });

      return () => {
        instance.destroy();
      };
    }
  }, []);

  return <button ref={buttonRef}>Imperative tooltip</button>;
}

Core Types

type Content = React.ReactNode;

interface TippyProps extends Partial<Omit<Props, 'content' | 'render'>> {
  children?: React.ReactElement<any>;
  content?: Content;
  visible?: boolean;
  disabled?: boolean;
  className?: string;
  singleton?: SingletonObject;
  reference?: React.RefObject<Element> | Element | null;
  ref?: React.Ref<Element>;
  render?: (
    attrs: {
      'data-placement': Placement;
      'data-reference-hidden'?: string;
      'data-escaped'?: string;
    },
    content?: Content,
    instance?: Instance
  ) => React.ReactNode;
}

interface SingletonObject {
  data?: any;
  hook(args: SingletonHookArgs): void;
}

interface SingletonHookArgs {
  instance: Instance;
  content: Content;
  props: Props;
}

interface UseSingletonProps {
  disabled?: boolean;
  overrides?: Array<keyof Props>;
}

Note: Props, Instance, and Placement types are imported from the core tippy.js library. The Props interface includes all native Tippy.js properties such as placement, trigger, delay, animation, arrow, interactive, theme, and many others. Refer to the Tippy.js documentation for a complete list of available properties.