tessl/npm-react-tooltip

React tooltip component library with customizable positioning, styling, and accessibility features

—

Pending

Overview

Eval results

Files

Legacy Components

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

Provider and wrapper components for backward compatibility with earlier versions of react-tooltip. These components are deprecated in favor of the main Tooltip component with data attributes but are maintained for legacy support.

Capabilities

TooltipProvider

Context provider component for managing tooltip state across multiple tooltip instances. Used primarily for legacy applications that require shared tooltip state.

/**
 * Context provider for tooltip management (legacy)
 * @param props - Provider configuration
 * @returns React context provider component
 */
function TooltipProvider(props: { children: React.ReactNode }): React.ReactElement;

Usage Example:

import { TooltipProvider, TooltipWrapper, Tooltip } from "react-tooltip";

function App() {
  return (
    <TooltipProvider>
      <div>
        <TooltipWrapper tooltipId="legacy-tooltip" content="Legacy content">
          <button>Legacy Button</button>
        </TooltipWrapper>
        <Tooltip id="legacy-tooltip" />
      </div>
    </TooltipProvider>
  );
}

TooltipWrapper (Deprecated)

Wrapper component that provides tooltip functionality to child elements using the legacy context-based approach.

/**
 * Wrapper component for legacy tooltip implementation (deprecated)
 * Use data attributes with main Tooltip component instead
 * @param props - Wrapper configuration
 * @returns React wrapper component
 */
function TooltipWrapper(props: ITooltipWrapper): React.ReactElement;

interface ITooltipWrapper {
  /** ID of associated tooltip */
  tooltipId?: string;
  /** Child elements to wrap */
  children: ReactNode;
  /** CSS class name */
  className?: string;
  /** Tooltip placement position */
  place?: PlacesType;
  /** Text content for tooltip */
  content?: string;
  /** HTML content (deprecated) */
  html?: string;
  /** Visual theme variant */
  variant?: VariantType;
  /** Distance from anchor element */
  offset?: number;
  /** HTML wrapper element type */
  wrapper?: WrapperType;
  /** Event types to trigger tooltip (deprecated) */
  events?: EventsType[];
  /** Positioning strategy */
  positionStrategy?: PositionStrategy;
  /** Delay before showing tooltip */
  delayShow?: number;
  /** Delay before hiding tooltip */
  delayHide?: number;
}

Usage Example:

import { TooltipProvider, TooltipWrapper, Tooltip } from "react-tooltip";

// Legacy wrapper approach (deprecated)
function LegacyExample() {
  return (
    <TooltipProvider>
      <div>
        <TooltipWrapper
          tooltipId="legacy-wrapper"
          content="This is legacy content"
          place="top"
          variant="dark"
        >
          <button>Legacy Wrapped Button</button>
        </TooltipWrapper>
        
        <Tooltip id="legacy-wrapper" />
      </div>
    </TooltipProvider>
  );
}

// Modern approach (recommended)
function ModernExample() {
  return (
    <div>
      <button 
        data-tooltip-id="modern-tooltip"
        data-tooltip-content="This is modern content"
        data-tooltip-place="top"
        data-tooltip-variant="dark"
      >
        Modern Button
      </button>
      
      <Tooltip id="modern-tooltip" />
    </div>
  );
}

useTooltip Hook

Hook for accessing tooltip context data. Used internally by legacy components and available for custom implementations requiring tooltip context. Note: This hook is not exported from the main package entry point.

/**
 * Hook for accessing tooltip context (primarily for internal use)
 * Import from: 'react-tooltip/dist/react-tooltip.min.cjs' or similar internal path
 * @returns Tooltip context data
 */
function useTooltip(): TooltipContextDataWrapper;

interface TooltipContextDataWrapper {
  getTooltipData: (tooltipId?: string) => TooltipContextData;
}

interface TooltipContextData {
  anchorRefs: Set<AnchorRef>;
  activeAnchor: AnchorRef;
  attach: (...refs: AnchorRef[]) => void;
  detach: (...refs: AnchorRef[]) => void;
  setActiveAnchor: (ref: AnchorRef) => void;
}

interface AnchorRef {
  current: HTMLElement | null;
}

Usage Example:

// useTooltip requires direct import from internal path, not main package export
// This example is for illustration of the internal API structure

function CustomTooltipComponent() {
  const { getTooltipData } = useTooltip();
  const tooltipData = getTooltipData("my-tooltip");
  
  // Custom logic using tooltip context
  const handleAttach = () => {
    const ref = { current: document.getElementById('my-element') };
    tooltipData.attach(ref);
  };
  
  return (
    <div>
      <button onClick={handleAttach}>Attach Tooltip</button>
      {/* Custom tooltip implementation */}
    </div>
  );
}

Migration Guide

From TooltipWrapper to Data Attributes

// Old approach (TooltipWrapper)
<TooltipProvider>
  <TooltipWrapper
    tooltipId="example"
    content="Tooltip content"
    place="top"
    variant="success"
  >
    <button>Click me</button>
  </TooltipWrapper>
  <Tooltip id="example" />
</TooltipProvider>

// New approach (Data Attributes)
<div>
  <button
    data-tooltip-id="example"
    data-tooltip-content="Tooltip content"
    data-tooltip-place="top"
    data-tooltip-variant="success"
  >
    Click me
  </button>
  <Tooltip id="example" />
</div>

Benefits of Modern Approach

Simpler markup: No wrapper components needed
Better performance: No context providers required
Cleaner HTML: Direct data attributes on elements
Easier debugging: Clear relationship between elements and tooltips
Future-proof: Aligns with modern React patterns

Legacy Support Types

type AnchorRef = RefObject<HTMLElement>;

interface TooltipContextData {
  anchorRefs: Set<AnchorRef>;
  activeAnchor: AnchorRef;
  attach: (...refs: AnchorRef[]) => void;
  detach: (...refs: AnchorRef[]) => void;
  setActiveAnchor: (ref: AnchorRef) => void;
}

Install with Tessl CLI