Tippy.js：强大的 JavaScript 工具提示库

Tippy.js 是一个轻量级、高度可定制的 JavaScript 工具提示库，基于 Popper.js 构建。它支持丰富的交互效果，适用于现代 Web 应用开发。

核心特性

• 高度可定制：支持自定义动画、主题、触发行为，满足不同 UI 需求。
• 智能定位：基于 Popper.js 自动调整位置，避免遮挡或溢出视口。
• 丰富的内容支持：支持 HTML、React、Vue 等框架，可嵌入复杂交互元素。
• 无障碍访问：遵循 WAI-ARIA 标准，确保屏幕阅读器兼容性。

基础用法

安装 Tippy.js：

npm install tippy.js
# 或通过 CDN
<script src="https://unpkg.com/tippy.js@6"></script>

初始化工具提示：

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // 引入默认样式

tippy('#example', {
  content: '这是一个工具提示',
  placement: 'right',
  animation: 'fade',
});

进阶配置

自定义主题

tippy('#button', {
  content: '自定义主题',
  theme: 'light-border',
});

动态内容加载

tippy('#dynamic', {
  content: '加载中...',
  onShow(instance) {
    fetch('/api/tooltip').then(res => res.text()).then(text => {
      instance.setContent(text);
    });
  },
});

交互式工具提示

tippy('#interactive', {
  content: document.querySelector('#tooltip-template'),
  interactive: true,
  allowHTML: true,
});

性能优化

• 单例模式：复用同一实例减少内存占用。
• 延迟加载：通过 delay 选项优化频繁触发的场景。
• 虚拟元素：对动态生成的 DOM 使用 delegate 方法。

与其他库集成

React 示例

import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';

function App() {
  return (
    <Tippy content="React 工具提示">
      <button>悬停我</button>
    </Tippy>
  );
}

浏览器兼容性

支持现代浏览器（Chrome、Firefox、Safari、Edge）及 IE11（需 Polyfill）。

总结

Tippy.js 以简洁的 API 和强大的扩展性成为工具提示库的优选。无论是基础提示还是复杂交互，均能高效实现。

https://github.com/tsiemar/a6e_afl8
https://github.com/trexzhtd/vv3_zurh
https://github.com/saveotea74/q1e_295h
https://github.com/akizmuumuk/bbt_tiry
https://github.com/ayyaasitu/9db_5q3o