当前位置：首页 > React

react tooltip 实现

2026-01-26 16:07:47React

React Tooltip 实现方法

使用第三方库 react-tooltip

安装 react-tooltip 库：

npm install react-tooltip

引入并使用：

import React from 'react';
import { Tooltip } from 'react-tooltip';

const App = () => {
  return (
    <div>
      <button data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
        Hover me
      </button>
      <Tooltip id="my-tooltip" />
    </div>
  );
};

export default App;

使用 CSS 自定义样式

通过 place、variant 等属性调整位置和样式：

<Tooltip 
  id="my-tooltip" 
  place="top" 
  variant="dark" 
  style={{ fontSize: '14px' }}
/>

动态内容

通过 data-tooltip-content 动态更新内容：

<button 
  data-tooltip-id="dynamic-tooltip" 
  data-tooltip-content={isActive ? "Active" : "Inactive"}
>
  Toggle
</button>
<Tooltip id="dynamic-tooltip" />

自定义组件作为 Tooltip

将 React 组件作为 Tooltip 内容：

const CustomContent = () => <div>Custom <b>HTML</b></div>;

<button data-tooltip-id="custom-tooltip">
  Hover for custom content
</button>
<Tooltip id="custom-tooltip">
  <CustomContent />
</Tooltip>

手动控制显示/隐藏

通过 Tooltip 的 isOpen 和 setIsOpen：

import { useState } from 'react';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        Toggle Tooltip
      </button>
      <Tooltip 
        id="manual-tooltip" 
        isOpen={isOpen} 
        content="Manual control"
      />
    </div>
  );
};

延迟显示/隐藏

通过 delayShow 和 delayHide 控制延迟时间（毫秒）：

<Tooltip 
  id="delayed-tooltip" 
  delayShow={500} 
  delayHide={200}
/>

无障碍支持

添加 aria-labelledby 或 aria-describedby 属性：

<button 
  data-tooltip-id="a11y-tooltip" 
  aria-labelledby="a11y-tooltip"
>
  Accessible Button
</button>
<Tooltip id="a11y-tooltip" content="Accessible tooltip" />