{"id":11639,"library":"rc-tooltip","title":"React Tooltip Component","description":"The `rc-tooltip` package provides a highly customizable and unstyled React tooltip component, focusing on core functionality like positioning, event triggers, and state management. It allows developers to integrate robust tooltip behavior while maintaining full control over the visual presentation, aligning with a 'bring your own UI' philosophy. The version requested, 6.4.0, was the last major release under the `rc-tooltip` package name. However, active development and new features for this component have transitioned to the `@rc-component/tooltip` package, currently at version 1.x.x. While `rc-tooltip` 6.4.0 remains functional for its intended purpose, it is effectively superseded, and new projects or those requiring ongoing updates and accessibility enhancements should migrate to the `@rc-component/tooltip` package. The original `rc-tooltip` package's last update was approximately three years ago.","status":"renamed","version":"6.4.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/tooltip","tags":["javascript","react","react-component","react-tooltip","tooltip","typescript"],"install":[{"cmd":"npm install rc-tooltip","lang":"bash","label":"npm"},{"cmd":"yarn add rc-tooltip","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-tooltip","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The main Tooltip component is a default export.","wrong":"import { Tooltip } from 'rc-tooltip';","symbol":"Tooltip","correct":"import Tooltip from 'rc-tooltip';"},{"note":"Importing TypeScript types for component props.","symbol":"ITooltipProps","correct":"import type { ITooltipProps } from 'rc-tooltip';"},{"note":"CommonJS import for older Node.js environments or build setups. The component is a default export.","wrong":"const { Tooltip } = require('rc-tooltip');","symbol":"Tooltip (CJS)","correct":"const Tooltip = require('rc-tooltip');"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Tooltip from 'rc-tooltip';\nimport 'rc-tooltip/assets/bootstrap.css'; // Or your custom styles\n\nconst App = () => (\n  <div style={{ margin: 100, display: 'flex', justifyContent: 'center' }}>\n    <Tooltip\n      placement=\"right\"\n      overlay={<span>Tooltip Content</span>}\n      trigger={['hover', 'focus']}\n      mouseEnterDelay={0.1}\n      mouseLeaveDelay={0.1}\n      destroyTooltipOnHide={true}\n    >\n      <button type=\"button\" style={{ padding: '10px 20px', cursor: 'pointer' }}>\n        Hover Me for Tooltip\n      </button>\n    </Tooltip>\n  </div>\n);\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(<App />);","lang":"typescript","description":"Demonstrates basic usage of `rc-tooltip` with a button, showing how to define overlay content, placement, and trigger events with custom delays."},"warnings":[{"fix":"Migrate your dependencies from `rc-tooltip` to `@rc-component/tooltip`. This may involve adjusting import paths and reviewing prop changes as the new package evolves.","message":"The `rc-tooltip` package has been effectively renamed to `@rc-component/tooltip`. New development, features, and significant bug fixes are now applied to the new package. Users should migrate to `@rc-component/tooltip` for a actively maintained version.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"It is highly recommended to upgrade to the `@rc-component/tooltip` package to ensure you receive ongoing maintenance, security patches, and new features, including enhanced accessibility (`a11y`) support.","message":"The `rc-tooltip` package, specifically version 6.x, is no longer actively maintained under this name. This means new browser compatibility issues, security vulnerabilities, or accessibility improvements present in modern web standards may not be addressed.","severity":"gotcha","affected_versions":">=6.0.0"},{"fix":"For CommonJS, ensure `const Tooltip = require('rc-tooltip');` is used. For modern JavaScript and TypeScript projects, always prefer `import Tooltip from 'rc-tooltip';`.","message":"Using `require('rc-tooltip')` directly in an ESM project without proper transpilation can lead to issues with default exports being nested under a `.default` property.","severity":"deprecated","affected_versions":"<6.4.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `rc-tooltip` is installed: `npm install rc-tooltip` or `yarn add rc-tooltip`. Verify the import path for CSS is correct.","cause":"The package or its default styles are not installed or cannot be found by the module resolver.","error":"Error: Can't resolve 'rc-tooltip' or 'rc-tooltip/assets/bootstrap.css'"},{"fix":"Install React and ReactDOM if not present: `npm install react react-dom` or `yarn add react react-dom`. Check the peer dependency requirements in your `package.json` for `rc-tooltip`.","cause":"This often indicates `react` or `react-dom` peer dependencies are missing or their versions are incompatible.","error":"TypeError: Cannot read properties of undefined (reading 'call') at Tooltip"},{"fix":"Verify that the `trigger` prop is correctly set (e.g., `['hover', 'focus']`). Ensure the `overlay` prop has valid React content. Inspect CSS for z-index conflicts or hidden overflow on parent elements.","cause":"Common causes include an incorrect `trigger` prop, missing `overlay` content, or CSS conflicts (e.g., z-index issues) preventing the tooltip from being visible.","error":"Tooltip does not appear on hover/focus."}],"ecosystem":"npm"}