React-Bootstrap OverlayTrigger 组件

OverlayTrigger 是一个 react-bootstrap 中的常用组件，它提供了一种简单的方式来实现弹出提示框的效果。本文将向大家介绍 OverlayTrigger 组件的使用方法和注意事项。

安装

React-Bootstrap 库是基于 react 和 bootstrap 构建而成，因此安装前需要先安装 react 和 bootstrap。

# 安装 react 和 bootstrap
npm install --save react bootstrap
# 安装 react-bootstrap
npm install --save react-bootstrap

导入

import { OverlayTrigger, Tooltip } from 'react-bootstrap';

使用

<OverlayTrigger
  placement="top"
  overlay={<Tooltip>Tooltip 测试</Tooltip>}
>
  <Button>Hover Me</Button>
</OverlayTrigger>

上述代码中，OverlayTrigger 组件包裹着一个 Button 组件。当鼠标移到按钮上时，会显示一个 tooltip 提示框，提示框内容为 "Tooltip 测试"。

OverlayTrigger 接受以下属性：

• trigger: 触发方式，可选值有 "hover"、"click"、"focus"、"manual"。
• placement: 提示框位置，可选值有 "top"、"bottom"、"left"、"right"。
• overlay: 提示框的内容，可以是一个 react 元素或函数，函数接受参数 props 和 content，返回一个 react 元素。

注意：overlay 属性不能直接使用字符串，需使用 <Tooltip> 或 <Popover> 组件包裹。

自定义

在默认情况下，OverlayTrigger 提供的 Tooltip 样式可能与你的项目不符合。那么，我们如何自定义 Tooltip 的样式呢？

const CustomTooltip = ({ content }) => {
  return (
    <div className="custom-tooltip">
      {content}
    </div>
  );
};

<OverlayTrigger
  placement="top"
  overlay={<CustomTooltip content="自定义测试Tooltip"/>}
>
  <Button>Hover Me</Button>
</OverlayTrigger>

上述代码中，我们自定义了一个 Tooltip 组件 CustomTooltip，并给它添加了一个 "custom-tooltip" 的类名。在 OverlayTrigger 的 overlay 属性中，我们使用了 <CustomTooltip> 组件，并传入了一个 content 属性。

我们再来看一下 CSS 代码：

.custom-tooltip {
  position: absolute;
  background-color: #000;
  color: #fff;
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  z-index: 999;   
}

由于 Tooltip 默认是绝对定位，因此我们在 CSS 中也需要添加 position: absolute; 属性。此外，其他样式都是你想要的样式。

总结

OverlayTrigger 是一个非常实用的组件，它提供了一个简单的方式来实现 Tooltip 的效果。在使用 OverlayTrigger 时，需要指定 placement 和 overlay，并可以使用自定义提示框。

代码片段：

import { OverlayTrigger, Tooltip } from 'react-bootstrap';

const CustomTooltip = ({ content }) => {
  return (
    <div className="custom-tooltip">
      {content}
    </div>
  );
};

const App = () => {
  return (
    <OverlayTrigger
      placement="top"
      overlay={<CustomTooltip content="自定义测试Tooltip"/>}
    >
      <Button>Hover Me</Button>
    </OverlayTrigger>
  );
};