# @uiw/react-tooltip

> Tooltip component

Latest version **4.22.3** (published 2023-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @uiw/react-tooltip
pnpm add @uiw/react-tooltip
yarn add @uiw/react-tooltip
bun add @uiw/react-tooltip
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.22.3 |
| Published | 2023-11-29 |
| First published | 2020-05-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 25.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 740 |
| Author | Kenny Wong |
| Maintainers | uiwjs, wcjiang |
| Keywords | tooltip, react-tooltip, design, uiw, uiw-react, react.js, react, react-component, component, components, ui, css, uikit, react-ui, framework, front-end, frontend |

## Links

- npm: https://www.npmjs.com/package/@uiw/react-tooltip
- Repository: https://github.com/uiwjs/uiw
- Homepage: https://uiwjs.github.io/#/components/tooltip
- Issues: https://github.com/uiwjs/uiw/issues
- Funding: https://jaywcjlove.github.io/#/sponsor
- npm.io page: https://npm.io/package/@uiw/react-tooltip

## Dependencies (2)

- [@uiw/utils](https://npm.io/package/@uiw/utils.md) ^4.22.3
- [@uiw/react-overlay-trigger](https://npm.io/package/@uiw/react-overlay-trigger.md) ^4.22.3

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 4.22.3 (latest) — 2023-11-29
- 5.0.0-bate.2.1 (bate) — 2023-03-10
- 4.22.2 — 2023-11-09
- 4.22.1 — 2023-11-08
- 4.22.0 — 2023-09-19
- 4.21.28 — 2023-05-05
- 4.21.27 — 2023-04-21
- 4.21.26 — 2023-04-20
- 4.21.25 — 2023-03-14
- 4.21.24 — 2023-03-08
- 5.0.0-bate.2.0 — 2023-03-02
- 4.21.23 — 2022-12-21
- 4.21.22 — 2022-12-19
- 4.21.21 — 2022-12-19
- 5.0.0-bate-19 — 2022-12-12
- … 157 more at https://npm.io/package/@uiw/react-tooltip/versions

## README

Tooltip 文字提示
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tooltip/file/README.md)
[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-tooltip.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-tooltip)
[![npm version](https://img.shields.io/npm/v/@uiw/react-tooltip.svg?label=@uiw/react-tooltip)](https://npmjs.com/@uiw/react-tooltip)

简单的文字提示气泡框。

```jsx
import { Tooltip } from 'uiw';
// or
import Tooltip from '@uiw/react-tooltip';
```

### 基础用法

最简单的用法。

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Tooltip, Button } from 'uiw';

const Demo = () => (
  <div>
    <Tooltip placement="right" content="右边文字提示">
      <Button>右边文字提示(right)</Button>
    </Tooltip>
    <Tooltip placement="top" content="上边文字提示">
      <Button>上边文字提示(top)</Button>
    </Tooltip>
    <Tooltip placement="left" content="左边文字提示">
      <Button>左边文字提示(left)</Button>
    </Tooltip>
    <Tooltip placement="bottom" content="下边文字提示">
      <Button>下边文字提示(bottom)</Button>
    </Tooltip>
    <Tooltip placement="top" content="已被禁用">
      <Button disabled={true}>禁用</Button>
    </Tooltip>
  </div>
)
export default Demo;
```

### 位置

位置有 `12` 个方向，根据 `placement` 参数来设置。

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Tooltip, Button, Divider } from 'uiw';

const btnStl = {position: 'relative', width: 70 }
const Demo = () => (
  <div>
    <Tooltip placement="left" content={<strong>Hello uiw!</strong>}>
      <Button type="primary">左边文字提示(left)</Button>
    </Tooltip>

    <Tooltip placement="top" content={<strong>Hello uiw!</strong>}>
      <Button type="primary">上边文字提示(top)</Button>
    </Tooltip>

    <Tooltip placement="bottom" content={<strong>Hello uiw!</strong>}>
      <Button type="primary">下边文字提示(bottom)</Button>
    </Tooltip>

    <Tooltip placement="right" content={<strong>Hello uiw!</strong>}>
      <Button type="primary">右边文字提示(right)</Button>
    </Tooltip>

    <Divider />
    <div style={{ position: 'relative' }}>
      <Tooltip placement="topLeft" content={<strong>Hello uiw!</strong>}>
        <Button style={{ ...btnStl, left: 70 }}>TL</Button>
      </Tooltip>
      <Tooltip placement="top" content={<strong>Hello uiw!</strong>}>
        <Button style={{ ...btnStl, left: 70}}>Top</Button>
      </Tooltip>
      <Tooltip placement="topRight" content={<strong>Hello uiw!</strong>}>
        <Button style={{ ...btnStl, left: 70 }}>TR</Button>
      </Tooltip>
    </div>
    <div style={{ position: 'relative', paddingTop: 10 }}>
      <Tooltip placement="leftTop" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>
        <Button style={{ ...btnStl }}>LT</Button>
      </Tooltip>
      <Tooltip placement="rightTop" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>
        <Button style={{ ...btnStl, left: 216 }}>RT</Button>
      </Tooltip>
    </div>
    <div style={{ position: 'relative', paddingTop: 10 }}>
      <Tooltip placement="left" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>
        <Button style={{ ...btnStl }}>Left</Button>
      </Tooltip>
      <Tooltip placement="right" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>
        <Button style={{ ...btnStl, left: 216 }}>Right</Button>
      </Tooltip>
    </div>
    <div style={{ position: 'relative', paddingTop: 10 }}>
      <Tooltip placement="leftBottom" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>
        <Button style={{ ...btnStl }}>LB</Button>
      </Tooltip>
      <Tooltip placement="rightBottom" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>
        <Button style={{ ...btnStl, left: 216 }}>RB</Button>
      </Tooltip>
    </div>
    <div style={{ position: 'relative', paddingTop: 10 }}>
      <Tooltip placement="bottomLeft" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>
        <Button style={{ ...btnStl, left: 70 }}>BL</Button>
      </Tooltip>
      <Tooltip placement="bottom" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>
        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>
      </Tooltip>
      <Tooltip placement="bottomRight" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>
        <Button style={{ ...btnStl, left: 70 }}>BR</Button>
      </Tooltip>
    </div>

  </div>
)
export default Demo;
```

### 事件

文字提示组件 `<Tooltip />`，通过设置属性 `trigger` 可以文字提示操作方式。

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Tooltip, Button } from 'uiw';

const Demo = () => (
  <div>
    <Tooltip trigger="hover" placement="top" content="Hello uiw!">
      <Button type="primary">悬浮弹出文字提示(top)</Button>
    </Tooltip>
    <Tooltip trigger="click" placement="top" content="Hello uiw!">
      <Button type="success">点击弹出提示(top)</Button>
    </Tooltip>
  </div>
)
export default Demo;
```

### 文字提示框不显示箭头

通过设置属性 `visibleArrow` 可以文字提示框不显示箭头。

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Tooltip, Button } from 'uiw';

const Demo = () => (
  <div>

    <Tooltip visibleArrow={false} trigger="hover" placement="top" content="Hello uiw!">
      <Button type="primary">悬浮弹出文字提示(top)</Button>
    </Tooltip>
    <Tooltip visibleArrow={false} trigger="click" placement="right" content="Hello uiw!">
      <Button type="success">点击弹出提示(right)</Button>
    </Tooltip>

  </div>
)
export default Demo;
```

### 受控组件

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Tooltip, Switch, Divider } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super()
    this.state = {
      isOpen: false,
    }
  }
  onChange(e) {
    this.setState({ isOpen: e.target.checked });
  }
  onVisibleChange(isOpen) {
    this.setState({ isOpen });
  }
  render() {
    return (
      <div>
        <Tooltip
          isOpen={this.state.isOpen}
          onVisibleChange={this.onVisibleChange.bind(this)}
          placement="top"
          content="Hello uiw!"
        >
          <span>鼠标移动到此处，显示和消失触发事件，也可以通过 Switch 组件来控制</span>
        </Tooltip>
        <Divider />
        <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />
      </div>
    )
  }
}
export default Demo;
```


## Props

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| content | 显示的内容 | String,React.ReactNode | - |
| placement | 气泡框位置，可现实箭头在不通的方位 | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |
| visibleArrow | 是否显示 Tooltip 箭头 | Boolean | `true` |
| delay | 延迟进入和消失，`{ show: 2000, hide: 4000 }` 或者直接设置 `2000`，只对 `trigger=hover` 有效，继承 `<OverlayTrigger />` 组件属性 | Object/Number | - |
| trigger | 悬停/点击弹出窗口，继承 `<OverlayTrigger />` 组件属性 | Enum{`hover`, `click`} | `hover` |
| disabled | 是否禁用弹出目标 | Boolean | `false` |
| isOpen | 默认是否显示弹窗，继承 `<OverlayTrigger />` 组件属性 | Boolean | `false` |
| autoAdjustOverflow | 弹出层被遮挡时自动调整位置，继承 `<OverlayTrigger />` 组件属性 | Boolean | `false` |
| onVisibleChange | 显示隐藏的回调，继承 `<OverlayTrigger />` 组件属性 | Function(isVisible:bool) | - |

更多属性请参考 [OverlayTrigger](#/components/overlay-trigger)。

---
_Source: https://npm.io/package/@uiw/react-tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._