tooltip - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #llm #machine-learning #rust #linux #docker #macos #java #nodejs #awesome-list #vue #openai #open-source

tooltip

(★ 949)

💡 Positioned React tooltip for hover, focus, click, and controlled popup flows.

File Explorer

Download Latest Version (.zip)

- app.tsx
- tsconfig.json
- - codeql.yml
  - deploy-pages.yml
  - react-component-ci.yml
  - react-doctor.yml
  - surge-preview.yml
- dependabot.yml
- FUNDING.yml
- pre-commit
- - anim.less
- bootstrap.less
- bootstrap_white.less
- - arrowContent.md
  - disabled.md
  - formError.md
  - onVisibleChange.md
  - placement.md
  - point.md
  - showArrow.md
  - simple.md
  - twoButtons.md
- - arrowContent.tsx
  - disabled.tsx
  - formError.tsx
  - onVisibleChange.tsx
  - placement.tsx
  - point.tsx
  - showArrow.tsx
  - simple.tsx
  - twoButtons.tsx
- changelog.md
- index.md
- index.tsx
- placements.tsx
- Popup.tsx
- Tooltip.tsx
- index.test.tsx
- popup.test.tsx
- setup.js
.dumirc.ts
.editorconfig
.fatherrc.js
.fatherrc.ts
.gitignore
.prettierignore
.prettierrc
CHANGELOG.md
eslint.config.mjs
global.d.ts
LICENSE
package.json
README.md
README.zh-CN.md
tsconfig.json
type.d.ts
vercel.json

# Installation Guide

1. Get the code

git clone https://github.com/react-component/tooltip

Downloads the entire project code from GitHub to your computer.

cd tooltip

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install @rc-component/tooltip

Downloads and installs the libraries listed in package.json.

<a href="https://npmjs.org/package/@rc-component/tooltip"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/tooltip.svg?style=flat-square"></a>

Type this command into your terminal and run it.

<a href="https://npmjs.org/package/@rc-component/tooltip"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/tooltip.svg?style=flat-square"></a>

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <h1>@rc-component/tooltip</h1>
  <p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Part of the Ant Design ecosystem.</sub></p>
  <p>💡 Positioned React tooltip for hover, focus, click, and controlled popup flows.</p>

<p>
    <a href="https://npmjs.org/package/@rc-component/tooltip"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/tooltip.svg?style=flat-square"></a>
    <a href="https://npmjs.org/package/@rc-component/tooltip"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/tooltip.svg?style=flat-square"></a>
    <a href="https://github.com/react-component/tooltip/actions/workflows/react-component-ci.yml"><img alt="build status" src="https://github.com/react-component/tooltip/actions/workflows/react-component-ci.yml/badge.svg"></a>
    <a href="https://app.codecov.io/gh/react-component/tooltip"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/tooltip/master.svg?style=flat-square"></a>
    <a href="https://bundlephobia.com/package/@rc-component/tooltip"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/tooltip?style=flat-square"></a>
    <a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a>
  </p>
</div>

<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>

## Highlights

- Supports hover, focus, click, and controlled visibility through one trigger layer.
- Provides built-in placements, custom alignment, delays, arrows, and popup motion.
- Exposes semantic `classNames` and `styles` slots for root, arrow, and container nodes.
- Keeps accessibility wiring through generated tooltip ids and `aria-describedby`.

## Install

```bash
npm install @rc-component/tooltip
```

## Usage

```tsx pure
import Tooltip from '@rc-component/tooltip';
import '@rc-component/tooltip/assets/bootstrap_white.css';

export default () => (
  <Tooltip placement="top" overlay={<span>Tooltip content</span>}>
    <button type="button">Hover me</button>
  </Tooltip>
);
```

Online preview: https://tooltip.react-component.vercel.app/

## Examples

Run the local dumi site:

```bash
npm install
npm start
```

Then open `http://localhost:8000`.

## API

### Tooltip

| Name                  | Type                                                 | Default             | Description                                                |
| --------------------- | ---------------------------------------------------- | ------------------- | ---------------------------------------------------------- |
| `afterVisibleChange`  | `(visible: boolean) => void`                         | -                   | Called after popup visibility changes.                     |
| `align`               | AlignType                                            | `{}`                | Extra popup alignment config.                              |
| `arrowContent`        | React.ReactNode                                      | -                   | Custom arrow content.                                      |
| `builtinPlacements`   | TriggerProps['builtinPlacements']                    | built-in placements | Placement map passed to trigger.                           |
| `children`            | React.ReactElement                                   | -                   | Required trigger element.                                  |
| `classNames`          | `Partial<Record<SemanticName, string>>`              | -                   | Semantic class names for root, arrow, and container nodes. |
| `defaultVisible`      | boolean                                              | -                   | Initial uncontrolled visible state.                        |
| `destroyOnHidden`     | boolean                                              | false               | Destroy popup DOM when hidden.                             |
| `disabled`            | boolean                                              | false               | Temporarily hide tooltip while preserving visible state.   |
| `fresh`               | boolean                                              | -                   | Keep popup content fresh when closed.                      |
| `getTooltipContainer` | `(node: HTMLElement) => HTMLElement`                 | -                   | Resolve popup container.                                   |
| `id`                  | string                                               | generated id        | Tooltip id used for accessibility.                         |
| `motion`              | TriggerProps['popupMotion']                          | -                   | Popup motion config.                                       |
| `mouseEnterDelay`     | number                                               | 0                   | Delay in seconds before showing on mouse enter.            |
| `mouseLeaveDelay`     | number                                               | 0.1                 | Delay in seconds before hiding on mouse leave.             |
| `onPopupAlign`        | TriggerProps['onPopupAlign']                         | -                   | Called after popup alignment.                              |
| `onVisibleChange`     | `(visible: boolean) => void`                         | -                   | Called when visibility changes.                            |
| `overlay`             | React.ReactNode \| `() => React.ReactNode`           | -                   | Tooltip content.                                           |
| `placement`           | string                                               | `'right'`           | Popup placement.                                           |
| `prefixCls`           | string                                               | `'rc-tooltip'`      | Prefix class name.                                         |
| `showArrow`           | boolean \| ArrowType                                 | true                | Whether to show arrow or provide arrow config.             |
| `styles`              | `Partial<Record<SemanticName, React.CSSProperties>>` | -                   | Semantic styles for root, arrow, and container nodes.      |
| `trigger`             | ActionType \| ActionType[]                           | `['hover']`         | Actions that show the tooltip.                             |
| `unique`              | TriggerProps['unique']                               | -                   | Experimental unique container reuse config.                |
| `visible`             | boolean                                              | -                   | Controlled visible state.                                  |
| `zIndex`              | number                                               | -                   | Popup z-index.                                             |

## Development

```bash
npm install
npm start
npm test
npm run tsc
npm run compile
npm run build
```

The dumi site runs at `http://localhost:8000` by default.

## Release

```bash
npm run prepublishOnly
```

The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.

## License

@rc-component/tooltip is released under the [MIT](./LICENSE) license.