{"id":11889,"library":"react-tooltip","title":"React Tooltip Component","description":"react-tooltip is a comprehensive and highly customizable React component for displaying tooltips. Currently at version 5.30.1, it boasts an active development cycle with frequent patch and minor releases that introduce new features, resolve bugs, and enhance performance. Built on `floating-ui`, it offers significant performance improvements over its predecessors and is written entirely in TypeScript, providing robust type definitions out-of-the-box. Key differentiators include extensive customization options via props and data attributes, support for various event triggers (e.g., hover, click), and built-in accessibility features like automatic `aria-describedby` generation. It requires React and ReactDOM versions 16.14.0 or higher as peer dependencies, ensuring compatibility with modern React applications.","status":"active","version":"5.30.1","language":"javascript","source_language":"en","source_url":"https://github.com/ReactTooltip/react-tooltip","tags":["javascript","react","react-component","tooltip","react-tooltip","typescript"],"install":[{"cmd":"npm install react-tooltip","lang":"bash","label":"npm"},{"cmd":"yarn add react-tooltip","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-tooltip","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Since v5, the main component is a named export `Tooltip`, not a default export `ReactTooltip` like in v4. Always use named import.","wrong":"import ReactTooltip from 'react-tooltip';","symbol":"Tooltip","correct":"import { Tooltip } from 'react-tooltip';"},{"note":"Type import for programmatic control methods available via refs, useful for TypeScript projects.","symbol":"ITooltipController","correct":"import type { ITooltipController } from 'react-tooltip';"},{"note":"Type import for the ref object used to access programmatic methods of the Tooltip component.","symbol":"TooltipRef","correct":"import type { TooltipRef } from 'react-tooltip';"}],"quickstart":{"code":"import React, { useRef, useState } from 'react';\nimport { Tooltip, TooltipRef } from 'react-tooltip';\n\nfunction MyComponent() {\n  const tooltipRef = useRef<TooltipRef>(null);\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n  const showProgrammaticTooltip = () => {\n    if (tooltipRef.current) {\n      tooltipRef.current.showTooltip();\n      setIsTooltipOpen(true);\n    }\n  };\n\n  const hideProgrammaticTooltip = () => {\n    if (tooltipRef.current) {\n      tooltipRef.current.hideTooltip();\n      setIsTooltipOpen(false);\n    }\n  };\n\n  return (\n    <div>\n      <a\n        data-tooltip-id=\"my-hover-tooltip\"\n        data-tooltip-content=\"Hello, hover world!\"\n      >\n        Hover over me\n      </a>\n      <Tooltip id=\"my-hover-tooltip\" />\n\n      <br /><br />\n\n      <button\n        data-tooltip-id=\"my-click-tooltip\"\n        data-tooltip-content=\"Click me for content!\"\n      >\n        Click for Tooltip\n      </button>\n      <Tooltip id=\"my-click-tooltip\" place=\"right\" events={['click']} />\n\n      <br /><br />\n\n      <button onClick={showProgrammaticTooltip} disabled={isTooltipOpen}>\n        Show Programmatic Tooltip\n      </button>\n      <button onClick={hideProgrammaticTooltip} disabled={!isTooltipOpen}>\n        Hide Programmatic Tooltip\n      </button>\n      <span\n        id=\"programmatic-anchor\"\n        style={{ marginLeft: '10px', padding: '5px', border: '1px solid gray' }}\n      >\n        Anchor\n      </span>\n      <Tooltip\n        id=\"programmatic-tooltip\"\n        content=\"I'm controlled by buttons!\"\n        isOpen={isTooltipOpen}\n        setIsOpen={setIsTooltipOpen}\n        anchorSelect=\"#programmatic-anchor\"\n        ref={tooltipRef}\n        place=\"bottom\"\n      />\n    </div>\n  );\n}\n\nexport default MyComponent;\n","lang":"typescript","description":"Demonstrates basic hover and click triggered tooltips, along with programmatic control."},"warnings":[{"fix":"Update anchor elements to use the new `data-tooltip-` prefixed attributes (e.g., `data-tooltip-id` and `data-tooltip-content`). Refer to the v4->v5 changelog for a complete list.","message":"Major breaking changes occurred in v5. All data attributes are now prefixed with `data-tooltip-`. For example, `data-for` became `data-tooltip-id` and `data-tip` became `data-tooltip-content`.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Change your import statements from `import ReactTooltip from 'react-tooltip';` to `import { Tooltip } from 'react-tooltip';`.","message":"The main component export changed from a default export named `ReactTooltip` in v4 to a named export `Tooltip` in v5.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Remove all calls to `ReactTooltip.rebuild()`. The component now handles updates automatically. If issues arise, report them with a reproducible example.","message":"The `ReactTooltip.rebuild()` method, used in v4 for dynamic content updates, was removed in v5. Tooltips now automatically watch for DOM changes.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Refactor content provision to use `data-tooltip-content` attribute on the anchor or the `content` prop directly on the `Tooltip` component.","message":"The `getContent` prop was removed in v5, and content is primarily managed via `data-tooltip-content` or the `content` prop on the `Tooltip` component.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"If you require the `float` effect, explicitly set the `effect` prop to `float` on your `Tooltip` component: `<Tooltip effect=\"float\" ... />`.","message":"The default behavior of the tooltip's effect changed from `float` to `solid` in v5.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Ensure your bundler (e.g., Webpack) is correctly configured to handle `.mjs` files and ESM modules within `node_modules`. This may involve adding rules like `{ test: /\\.mjs$/, include: /node_modules/, type: 'javascript/auto' }` to your Webpack configuration.","message":"Bundling issues can occur in some environments (e.g., SPFx) where `react-tooltip`'s ESM module is incorrectly treated as CommonJS, leading to 'Can't import named export from non EcmaScript module' errors.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For v5+, ensure you are using `import { Tooltip } from 'react-tooltip';`. If the error persists, check your bundler configuration for proper ESM handling (e.g., Webpack's `javascript/auto` for `.mjs` files). For v4, use `import ReactTooltip from 'react-tooltip';`.","cause":"Attempting to use named import syntax for `Tooltip` in a v4 codebase or in a v5 setup where a bundler incorrectly treats the module as CommonJS.","error":"Cannot import the named export 'Tooltip' from 'react-tooltip' (only default export is available)"},{"fix":"Verify that the `id` prop on `<Tooltip>` exactly matches the `data-tooltip-id` attribute on your interactive element. Also, ensure that `react-tooltip`'s default styles are being imported (e.g., `import 'react-tooltip/dist/react-tooltip.css';`).","cause":"The `id` on the `Tooltip` component does not match the `data-tooltip-id` attribute on the anchor element, or the required styles are not loaded.","error":"Tooltip is not showing up or not appearing on hover/click."},{"fix":"Ensure you are on v5+ (which handles updates automatically). If on v4, call `ReactTooltip.rebuild()` after dynamic content changes. For v5, if automatic updates fail, ensure your anchor element is correctly rendered and its `data-tooltip-content` or `content` prop is bound to reactive state. Consider using the `setIsOpen` prop for explicit control in complex scenarios.","cause":"In v4, users expected to call `ReactTooltip.rebuild()`. In v5, while automatic, complex DOM manipulations or certain rendering patterns might cause issues if the component doesn't detect changes.","error":"Tooltip content is not updating dynamically after state changes."},{"fix":"Ensure that the `ref` prop is correctly attached to the `Tooltip` component instance, e.g., `const tooltipRef = useRef<TooltipRef>(null); <Tooltip ref={tooltipRef} ... />`. Avoid manually trying to set the ref to a DOM element directly when the type expects a component ref.","cause":"Incorrectly assigning a non-ReactElement type to a ref that expects a React element or component instance for `TooltipRef`.","error":"Type 'Element' is not assignable to type 'ReactElement<any, any> | null' in TypeScript with `TooltipRef`."}],"ecosystem":"npm"}