tessl/npm-tippyjs--react

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

—

Pending

Overview

Eval results

Files

Default Rendering

Name: tessl/npm-tippyjs--react
Author: tessl

Default rendering provides a complete tooltip implementation with built-in DOM rendering, styling, and animations. This is the standard approach that works out-of-the-box with minimal setup, perfect for most use cases.

Capabilities

Basic Tooltip

Creates a tooltip with built-in rendering and styling.

/**
 * Main Tippy component with default rendering
 * @param props - TippyProps configuration
 * @returns React component with tooltip functionality
 */
declare const Tippy: React.ForwardRefExoticComponent<TippyProps>;

interface TippyProps extends Partial<Omit<Props, 'content' | 'render'>> {
  /** Child element to attach tooltip to */
  children?: React.ReactElement<any>;
  /** Tooltip content - can be string or React element */
  content?: React.ReactNode;
  /** Controlled mode - explicitly control visibility */
  visible?: boolean;
  /** Disable/enable the tooltip */
  disabled?: boolean;
  /** CSS classes to apply to tooltip */
  className?: string;
  /** Singleton configuration for shared instances */
  singleton?: SingletonObject;
  /** External reference element (alternative to children) */
  reference?: React.RefObject<Element> | Element | null;
  /** Forward ref to underlying element */
  ref?: React.Ref<Element>;
}

Usage Examples:

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

// String content
function StringTooltip() {
  return (
    <Tippy content="Hello world">
      <button>Hover me</button>
    </Tippy>
  );
}

// React element content
function ReactTooltip() {
  return (
    <Tippy content={<div><strong>Bold</strong> tooltip</div>}>
      <button>Hover me</button>
    </Tippy>
  );
}

// With styling
function StyledTooltip() {
  return (
    <Tippy 
      content="Styled tooltip" 
      className="custom-tooltip"
      theme="dark"
      arrow={true}
    >
      <button>Hover me</button>
    </Tippy>
  );
}

Controlled Mode

Use React state to control tooltip visibility programmatically instead of relying on native triggers.

interface TippyProps {
  /** Control visibility with React state */
  visible?: boolean;
}

Usage Examples:

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

function ControlledTooltip() {
  const [visible, setVisible] = useState(false);

  const show = () => setVisible(true);
  const hide = () => setVisible(false);

  return (
    <Tippy 
      content="Controlled tooltip" 
      visible={visible}
      onClickOutside={hide}
    >
      <button onClick={visible ? hide : show}>
        {visible ? 'Hide' : 'Show'} tooltip
      </button>
    </Tippy>
  );
}

External Reference

Attach tooltip to an element outside the component tree using a ref or direct element reference.

interface TippyProps {
  /** External reference element */
  reference?: React.RefObject<Element> | Element | null;
}

Usage Examples:

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

function ExternalReference() {
  const buttonRef = useRef<HTMLButtonElement>(null);

  return (
    <>
      <button ref={buttonRef}>Target element</button>
      <Tippy content="External tooltip" reference={buttonRef} />
    </>
  );
}

Disabled State

Temporarily disable tooltip functionality while keeping the component mounted.

interface TippyProps {
  /** Disable the tooltip */
  disabled?: boolean;
}

Usage Examples:

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

function DisableableTooltip() {
  const [disabled, setDisabled] = useState(false);

  return (
    <div>
      <Tippy content="This tooltip can be disabled" disabled={disabled}>
        <button>Hover me</button>
      </Tippy>
      <button onClick={() => setDisabled(!disabled)}>
        {disabled ? 'Enable' : 'Disable'} tooltip
      </button>
    </div>
  );
}

Multiple Tooltips

Create multiple tooltips on a single element by nesting components.

// Multiple tooltips with different placements
function MultipleTooltips() {
  return (
    <Tippy content="Top tooltip" placement="top">
      <Tippy content="Bottom tooltip" placement="bottom">
        <Tippy content="Left tooltip" placement="left">
          <Tippy content="Right tooltip" placement="right">
            <button>Hover me</button>
          </Tippy>
        </Tippy>
      </Tippy>
    </Tippy>
  );
}

Component Children

When using custom components as children, ensure they forward refs properly.

import React, { forwardRef } from 'react';

// This won't work - no ref forwarding
function BadComponent() {
  return <button>Reference</button>;
}

// This will work - properly forwards ref
const GoodComponent = forwardRef<HTMLButtonElement>((props, ref) => {
  return <button ref={ref} {...props}>Reference</button>;
});

function App() {
  return (
    <Tippy content="Tooltip">
      <GoodComponent />
    </Tippy>
  );
}

All Tippy.js Props

The component accepts all native Tippy.js props for complete customization.

// Common Tippy.js props
function AdvancedTooltip() {
  return (
    <Tippy
      content="Advanced tooltip"
      placement="top-start"
      trigger="click"
      interactive={true}
      interactiveBorder={20}
      delay={[100, 50]}
      duration={[200, 150]}
      animation="fade"
      arrow={true}
      theme="dark"
      maxWidth={300}
      hideOnClick={false}
      onShow={(instance) => console.log('Tooltip shown')}
      onHide={(instance) => console.log('Tooltip hidden')}
    >
      <button>Advanced tooltip</button>
    </Tippy>
  );
}

Tippy.js Plugins

Extend tooltip functionality using Tippy.js plugins for tree-shaking optimization and advanced features.

interface TippyProps {
  /** Array of Tippy.js plugins to extend functionality */
  plugins?: Plugin[];
}

Usage Examples:

import React from 'react';
import Tippy from '@tippyjs/react';
import { followCursor } from 'tippy.js';

// Using followCursor plugin
function FollowCursorTooltip() {
  return (
    <Tippy 
      content="I follow the cursor!" 
      followCursor={true} 
      plugins={[followCursor]}
    >
      <button>Hover and move cursor</button>
    </Tippy>
  );
}

// Multiple plugins
import { sticky } from 'tippy.js';

function MultiplePlugins() {
  return (
    <Tippy 
      content="Advanced tooltip with plugins"
      followCursor="horizontal"
      sticky={true}
      plugins={[followCursor, sticky]}
    >
      <button>Advanced plugin example</button>
    </Tippy>
  );
}

Note: When using plugins, you must import them from tippy.js (not tippy.js/headless) even when using the default rendering mode.

CSS Import

Import the default CSS for styling (optional but recommended):

import 'tippy.js/dist/tippy.css';

The CSS provides default styling, themes, and animations. You can customize appearance using:

The className prop for custom CSS classes
The theme prop for built-in themes
Custom CSS overrides targeting Tippy.js selectors

Install with Tessl CLI

npx tessl i tessl/npm-tippyjs--react

docs

default-rendering.md

headless-rendering.md

index.md

singleton-mode.md

tile.json

tessl/npm-tippyjs--react