React Suite 工具提示组件

React Suite 工具提示组件（Tooltip）是一个强大的组件，它可以为网页应用程序提供丰富的用户交互体验和增强操作效率。本文将对该组件的特点、用法、API 和示例进行详细介绍。

特点

• 显示弹出窗口，提供提示信息。
• 支持自动定位和调整弹出窗口的位置。
• 可以显示自定义的内容，如图像、表格和图表等。
• 可以设置触发方式和延迟时间，实现较好的适用性。

用法

安装

React Suite 是一个基于 React 的 UI 库，它包括多个带样式的组件。要使用工具提示组件，需要先安装 React Suite。

npm install rsuite --save

引入

可以通过以下代码将 Tooltip 组件引入到你的 React 应用程序中：

import { Tooltip } from 'rsuite';

基本使用

Tooltip 组件有一个必须的属性，就是<Tooltip>的content，它表示要显示的内容。下面是一个简单的例子：

import { Tooltip, Button } from 'rsuite';

function Example() {
  return (
    <Tooltip content="Hello, World!">
      <Button>Hover Me</Button>
    </Tooltip>
  );
}

你还可以设置<Tooltip>的placement属性表示弹出窗口的位置和偏移量，如下：

function Example() {
  return (
    <Tooltip content="Hello, World!" placement="topStart">
      <Button>Hover Me</Button>
    </Tooltip>
  );
}

自定义内容

如果你想要显示自定义的内容，可以使用<Tooltip>的renderTooltip属性。下面是一个例子，显示一个表格：

import { Tooltip, Button, Table } from 'rsuite';

function Example() {
  const columns = [...];
  const data = [...];

  return (
    <Tooltip
      renderTooltip={() => (
        <Table showHeader={false} data={data} columns={columns} width={200} rowHeight={40} />
      )}
    >
      <Button>Hover Me</Button>
    </Tooltip>
  );
}

触发方式

Tooltip 组件支持多种触发方式，可以设置<Tooltip>的trigger属性：

function Example() {
  return (
    <Tooltip content="Hello, World!" trigger={['hover', 'click', 'focus']}>
      <Button>Hover/Click/Focus Me</Button>
    </Tooltip>
  );
}

延迟时间

如果你需要在触发之后延迟一段时间再显示弹出窗口，可以设置<Tooltip>的delay属性：

function Example() {
  return (
    <Tooltip content="Hello, World!" delay={1000}>
      <Button>Hover Me</Button>
    </Tooltip>
  );
}

API

Tooltip

属性

| 名称 | 类型 | 默认值 | 描述 | | -----------------| --------------------------------| ---------| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | children | React.ReactElement | - | 宿主元素。 | | content | React.ReactNode | - | 显示的内容，必须是一个 React 节点。 | | placement | PlacementType | 'top' | 弹出窗口的位置和偏移量，当值为字符串时使用预定义的位置，如：'top'，'topStart'，'topEnd'，'right'，'rightStart'，'rightEnd'，'bottom'，'bottomStart'，'bottomEnd'，'left'，'leftStart' 和 'leftEnd'。也可以是一个对象，其中包含 offset 表示偏移量，auto 表示是否自动调整位置。 | | renderTooltip | () => React.ReactNode | - | 自定义内容的渲染函数。 | | trigger | EventType[] | 'hover' | 触发方式，可以是字符串或者字符串数组。可以包含 'click'，'hover' 和 'focus'，其中 'click' 和 'hover' 两种方式可以同时出现，'click' 和 'focus' 同理。 | | delay | number | 0 | 延迟显示的时间（单位：毫秒）。 | | mouseEnterDelay | number | - | 延迟触发 onMouseEnter 事件的时间（单位：毫秒）。 | | mouseLeaveDelay | number | - | 延迟触发 onMouseLeave 事件的时间（单位：毫秒）。 | | update | boolean | - | 强制重新计算位置。 |

PlacementType

弹出窗口的位置和偏移量，可以是一个字符串或者一个对象。

字符串

| 值 | 描述 | | --------------| -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 'top' | 弹出窗口显示在目标元素上方居中位置。 | | 'topStart' | 弹出窗口显示在目标元素上方左侧位置。 | | 'topEnd' | 弹出窗口显示在目标元素上方右侧位置。 | | 'right' | 弹出窗口显示在目标元素右侧居中位置。 | | 'rightStart' | 弹出窗口显示在目标元素右侧顶部位置。 | | 'rightEnd' | 弹出窗口显示在目标元素右侧底部位置。 | | 'bottom' | 弹出窗口显示在目标元素下方居中位置。 | | 'bottomStart' | 弹出窗口显示在目标元素下方左侧位置。 | | 'bottomEnd' | 弹出窗口显示在目标元素下方右侧位置。 | | 'left' | 弹出窗口显示在目标元素左侧居中位置。 | | 'leftStart' | 弹出窗口显示在目标元素左侧顶部位置。 | | 'leftEnd' | 弹出窗口显示在目标元素左侧底部位置。 |

对象

弹出窗口的位置和偏移量，可以是一个对象，其中：

| 名称 | 类型 | 默认值 | 描述 | | --------- | ------------------------| ---------| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | offset | [number, number] 或字符串 | - | 弹出窗口的偏移量。数组类型表示 x、y 偏移量。字符串类型可以是 '0px 0px' 格式，如 '10px -5px'。 | | auto | boolean | true | 是否根据目标元素自动调整弹出窗口的位置。如果值为 false，则忽略 offset 属性。 |

事件类型（EventType）

| 值 | 描述 | | ----------| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 'hover' | 光标悬停事件。 | | 'click' | 点击事件。 | | 'focus' | 聚焦事件。 |

示例

下面是一些使用 Tooltip 组件的示例，地址：https://rsuite.github.io/react-tooltip/。

基本

一个简单的例子，显示有一个按钮，当鼠标指针悬停在按钮上时，弹出一个包含文本的弹出窗口。

import { Tooltip, Button } from 'rsuite';

function Example() {
  return (
    <Tooltip content="Hello, World!">
      <Button>Hover Me</Button>
    </Tooltip>
  );
}

自定义内容

一个将表格作为 Tooltip 内容的例子。

import { Tooltip, Button, Table } from 'rsuite';

function Example() {
  const columns = [...];
  const data = [...];

  return (
    <Tooltip
      renderTooltip={() => (
        <Table showHeader={false} data={data} columns={columns} width={200} rowHeight={40} />
      )}
    >
      <Button>Hover Me</Button>
    </Tooltip>
  );
}

触发方式

一个例子，演示如何使用不同的触发方式。

import { Tooltip, Button } from 'rsuite';

function Example() {
  return (
    <>
      <Tooltip content="Click Me" trigger="click">
        <Button>Click Me (Tooltip)</Button>
      </Tooltip>
      <Tooltip content="Hover Me" trigger="hover">
        <Button>Hover Me (Tooltip)</Button>
      </Tooltip>
      <Tooltip content="Focus Me" trigger="focus">
        <Button>Focus Me (Tooltip)</Button>
      </Tooltip>
    </>
  );
}

等待时间

一个例子，演示如何设置等待时间，延迟显示 Tooltip。

import { Tooltip, Button } from 'rsuite';

function Example() {
  return (
    <Tooltip content="Wait 1 second..." delay={1000}>
      <Button>Hover Me</Button>
    </Tooltip>
  );
}

偏移量

一个例子，演示如何设置 Tooltip 的偏移量。

import { Tooltip, Button } from 'rsuite';

function Example() {
  return (
    <Tooltip content="Hello, World!" placement={{ offset: [-10, -10] }}>
      <Button>Hover Me</Button>
    </Tooltip>
  );
}

更新位置

一个例子，演示如何在组件更新后强制更新 Tooltip 的位置。

import { Tooltip, Button } from 'rsuite';
import { useEffect, useState } from 'react';

function Example() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    setVisible(true);
  }, [setVisible]);

  return (
    <Tooltip content="Hello, World!" update={visible}>
      <Button onClick={() => setVisible(!visible)}>Toggle Visibility</Button>
    </Tooltip>
  );
}