npmpackage.info

Gathering detailed insights and metrics for rc-tooltip

Other packages similar to rc-tooltip

@types/rc-tooltip

4.0.0

Stub TypeScript definitions entry for rc-tooltip, which provides its own types definitions

dw-neit-rc-tooltip

6.2.1

React Tooltip

@rmwc/rc-tooltip

14.3.5

RMWC legacy tooltip component

@alicloud/console-base-rc-tooltip

1.1.22

ConsoleBase 组件 - Tooltip

Gathering detailed insights and metrics for rc-tooltip

rc-tooltip - 6.4.0 | npmpackage.info

rc-tooltip

React Tooltip

6.4.0

944

MIT

TypeScript

20.10 kB

430,808,111 4.1

Installations

npm install rc-tooltip

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.5.1

NPM Version

10.8.2 Score

91.2

Supply Chain

93.8

Quality

85.8

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

10

Total

320

Closed

213

Merged

97

Issues

Open

64

Total

175

Closed

111

Releases

@rc-component/tooltip@1.2.0

Updated on May 19, 2025

@rc-component/tooltip@1.1.0

Updated on Feb 24, 2025

v1.0.0

Updated on Jan 10, 2025

v6.4.0

Updated on Jan 07, 2025

v6.3.2

Updated on Dec 19, 2024

v6.3.1

Updated on Dec 04, 2024

View All 38 releases

Languages

TypeScript

JavaScript

Less

TypeScript (84.07%)

JavaScript (10.24%)

Less (5.69%)

Developer

react-component

Download Statistics

Total Downloads

430,808,111

Last Day

89,571

Last Week

2,154,962

Last Month

9,345,720

Last Year

101,230,976

GitHub Statistics

MIT License

944 Stars

308 Commits

196 Forks

26 Watchers

10 Branches

64 Contributors

Updated on Jul 04, 2025

Bundle Size

57.64 kB

Minified

20.10 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 64 Contributors

Package Meta Information

Latest Version

6.4.0

Package Id

rc-tooltip@6.4.0

Unpacked Size

54.92 kB

Size

9.39 kB

File Count

NPM Version

10.8.2

Node Version

22.5.1

Published on

Jan 07, 2025

Total Downloads

Cumulative downloads

Total Downloads

430,808,111

Last Day

1.5%

89,571

Compared to previous day

Last Week

-11.7%

2,154,962

Compared to previous week

Last Month

0.1%

9,345,720

Compared to previous month

Last Year

19.1%

101,230,976

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

rc-tooltip

React Tooltip

Screenshot

Browsers support

IE / Edge	Firefox	Chrome	Safari	Opera
IE 8 + ✔	Firefox 31.0+ ✔	Chrome 31.0+ ✔	Safari 7.0+ ✔	Opera 30.0+ ✔

Install

Usage

1var Tooltip = require('rc-tooltip');
2var React = require('react');
3var ReactDOM = require('react-dom');
4
5// By default, the tooltip has no style.
6// Consider importing the stylesheet it comes with:
7// 'rc-tooltip/assets/bootstrap_white.css'
8
9ReactDOM.render(
10  <Tooltip placement="left" trigger={['click']} overlay={<span>tooltip</span>}>
11    <a href="#">hover</a>
12  </Tooltip>,
13  container,
14);

Examples

npm start and then go to http://localhost:8000/demo

Online demo: https://react-component.github.io/tooltip/demo

API

Props

name	type	default	description
trigger	string \| string[]	'hover'	which actions cause tooltip shown. enum of 'hover','click','focus'
visible	boolean	false	whether tooltip is visible
defaultVisible	boolean	false	whether tooltip is visible by default
placement	string	'right'	tooltip placement. enum of 'top','left','right','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'
motion	object		Config popup motion. Please ref demo for example
onVisibleChange	(visible: boolean) => void;		Callback when visible change
afterVisibleChange	(visible: boolean) => void;		Callback after visible change
overlay	ReactNode \| () => ReactNode		tooltip overlay content
overlayStyle	object		deprecated, Please use `styles={{ root: {} }}`
overlayClassName	string		deprecated, Please use `classNames={{ root: {} }}`
prefixCls	string	'rc-tooltip'	prefix class name of tooltip
mouseEnterDelay	number	0	delay time (in second) before tooltip shows when mouse enter
mouseLeaveDelay	number	0.1	delay time (in second) before tooltip hides when mouse leave
getTooltipContainer	(triggerNode: HTMLElement) => HTMLElement	() => document.body	get container of tooltip, default to body
destroyTooltipOnHide	boolean	false	destroy tooltip when it is hidden
align	object		align config of tooltip. Please ref demo for usage example
showArrow	boolean \| object	false	whether to show arrow of tooltip
zIndex	number		config popup tooltip zIndex
classNames	classNames?: { root?: string; body?: string;};		Semantic DOM class
styles	styles?: {root?: React.CSSProperties;body?: React.CSSProperties;};		Semantic DOM styles

Important Note

Tooltip requires a child node that accepts an onMouseEnter, onMouseLeave, onFocus, onClick event. This means the child node must be a built-in component like div or span, or a custom component that passes its props to its built-in component child.

Accessibility

For accessibility purpose you can use the id prop to link your tooltip with another element. For example attaching it to an input element:

1<Tooltip
2    ...
3    id={this.props.name}>
4    <input type="text"
5           ...
6           aria-describedby={this.props.name}/>
7</Tooltip>

If you do it like this, a screenreader would read the content of your tooltip if you focus the input element.

NOTE: role="tooltip" is also added to expose the purpose of the tooltip element to a screenreader.

Development

1npm install
2npm start

Test Case

1npm test
2npm run chrome-test

Coverage

1npm run coverage

License

rc-tooltip is released under the MIT license.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

1

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

Score

4.1

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to rc-tooltip

Other packages similar to rc-tooltip

rc-tooltip

Installations

Developer Guide

Yes

CommonJS

22.5.1

10.8.2

Score

Pull Requests

10

320

213

97

Issues

64

175

111

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

57.64 kB

20.10 kB

Maintainers

Package Meta Information

Total Downloads

430,808,111

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

rc-tooltip

Screenshot

Browsers support

Install

Usage

Examples

API

Props

Important Note

Accessibility

Development

Test Case

Coverage

License

10

10

10

10

4

3

1

0

0

0

0

0

0

4.1

/10