ReactJS MDBootstrap 工具提示组件

ReactJS MDBootstrap 工具提示组件是一款基于 ReactJS 和 MDBootstrap 的工具提示组件，可以添加漂亮且自定义的提示信息。

安装

使用 npm 安装：

npm install react-bootstrap react-bootstrap-tooltip --save

使用

导入组件：

import { Tooltip } from 'react-bootstrap';
import React, { Component } from 'react';

渲染组件：

render() {
  return (
    <Tooltip title="Hello, World!">
      <button>Hover me</button>
    </Tooltip>
  );
}

属性

| 属性 | 类型 | 说明 | | --- | --- | --- | | title | string | 提示文本 | | placement | string | 提示位置，可选值：top、right、bottom、left | | delay | object | 显示/隐藏延迟，包含 show 和 hide 两个属性 | | overlayClassName | string | 添加到提示框样式的 className | | id | string | 元素 id | | validPositions | array | 有效的位置 |

示例

修改位置

render() {
  return (
    <Tooltip title="Hello, World!" placement="left">
      <button>Hover me</button>
    </Tooltip>
  );
}

自定义样式

render() {
  return (
    <Tooltip title="Hello, World!" overlayClassName="my-tooltip">
      <button>Hover me</button>
    </Tooltip>
  );
}

延迟显示/隐藏

render() {
  return (
    <Tooltip title="Hello, World!" delay={{ show: 500, hide: 200 }}>
      <button>Hover me</button>
    </Tooltip>
  );
}

结语

ReactJS MDBootstrap 工具提示组件是一个方便易用的工具提示组件，可以为网站添加漂亮的提示信息。