Registry / rc-tooltip

rc-tooltip

library6.4.0jsnpmunverified

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.

npm install rc-tooltip

github ↗package ↗

INSTALL

IMPORT

SIG · RC-TOOLTIP

rc-tooltip

javascriptv6.4.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Tooltip

✓ import Tooltip from 'rc-tooltip';

✗ 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)

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

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

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

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 />);

Debug

Known issues

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

affects: >=6.0.0

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

affects: >=6.0.0

deprecatedUsing `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';`.

affects: <6.4.0

Errors

Common errors & fixes

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

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

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.

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.

Upgrade

Version history

6.4.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

3 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/react-component/tooltip ↗

packagehttps://www.npmjs.com/package/rc-tooltip ↗