React Tooltip Component

Common errors

• Error: Can't resolve 'rc-tooltip' or 'rc-tooltip/assets/bootstrap.css'

  cause The package or its default styles are not installed or cannot be found by the module resolver.
  fix Ensure `rc-tooltip` is installed: `npm install rc-tooltip` or `yarn add rc-tooltip`. Verify the import path for CSS is correct.

• TypeError: Cannot read properties of undefined (reading 'call') at Tooltip

  cause This often indicates `react` or `react-dom` peer dependencies are missing or their versions are incompatible.
  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`.

• Tooltip does not appear on hover/focus.

  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.
  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.

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• deprecated 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.
  Fix: For CommonJS, ensure `const Tooltip = require('rc-tooltip');` is used. For modern JavaScript and TypeScript projects, always prefer `import Tooltip from 'rc-tooltip';`.

Install

• npm install rc-tooltip npm
• yarn add rc-tooltip yarn
• pnpm add rc-tooltip pnpm

Imports

• Tooltip
  wrong:

  import { Tooltip } from 'rc-tooltip';

  correct:

  import Tooltip from 'rc-tooltip';

  The main Tooltip component is a default export.
• ITooltipProps

  import type { ITooltipProps } from 'rc-tooltip';

  Importing TypeScript types for component props.
• Tooltip (CJS)
  wrong:

  const { Tooltip } = require('rc-tooltip');

  correct:

  const Tooltip = require('rc-tooltip');

  CommonJS import for older Node.js environments or build setups. The component is a default export.

Quickstart

Demonstrates basic usage of `rc-tooltip` with a button, showing how to define overlay content, placement, and trigger events with custom delays.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Tooltip from 'rc-tooltip';
import 'rc-tooltip/assets/bootstrap.css'; // Or your custom styles

const App = () => (
  <div style={{ margin: 100, display: 'flex', justifyContent: 'center' }}>
    <Tooltip
      placement="right"
      overlay={<span>Tooltip Content</span>}
      trigger={['hover', 'focus']}
      mouseEnterDelay={0.1}
      mouseLeaveDelay={0.1}
      destroyTooltipOnHide={true}
    >
      <button type="button" style={{ padding: '10px 20px', cursor: 'pointer' }}>
        Hover Me for Tooltip
      </button>
    </Tooltip>
  </div>
);

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<App />);