【亲测免费】 Tippy.js 使用教程

项目介绍

Tippy.js 是一个高度可定制的工具提示和弹出框库，由 Popper.js 驱动。它提供了元素“弹出”文档流的逻辑和可选样式，并浮动在目标元素旁边。Tippy.js 具有以下特点：

• 🧠 智能：优化的定位引擎，支持翻转和溢出预防
• ⚡ 快速：高性能，适用于低端设备
• 🖱️ 通用：支持鼠标、键盘和触摸输入
• ♿ 可访问：符合 WAI-ARIA 标准
• 🖌 可主题化：通过自定义 CSS 样式，包括额外主题和动画
• 🔌 可插件化：通过插件增强功能
• 🌳 可摇树化：通过导入所需内容最小化包大小
• 🧩 类型化：开箱即用的 TypeScript 支持
• 🌐 支持 IE11+

项目快速启动

安装

你可以通过 npm 或 Yarn 安装 Tippy.js：

# 使用 npm
npm install tippy.js

# 使用 Yarn
yarn add tippy.js

导入

导入 Tippy.js 的构造函数和核心 CSS：

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

基本使用

以下是一个简单的示例，展示如何在按钮上添加工具提示：

// 选择目标元素
const button = document.querySelector('#myButton');

// 创建工具提示
tippy(button, {
  content: '这是一个工具提示!',
});

应用案例和最佳实践

交互式工具提示

你可以创建一个交互式的工具提示，允许用户点击工具提示内部：

tippy(button, {
  content: '点击这里',
  interactive: true,
});

包含 HTML 内容的工具提示

工具提示可以包含 HTML 内容，使其更加丰富：

tippy(button, {
  content: '<strong>加粗的 <span style="color: aqua">内容</span></strong>',
  allowHTML: true,
});

延迟显示和隐藏

你可以设置工具提示显示和隐藏的延迟时间：

tippy(button, {
  content: '延迟显示和隐藏',
  delay: [800, 500], // 显示延迟 800ms，隐藏延迟 500ms
});

典型生态项目

Tippy.js 可以与其他库和框架结合使用，以下是一些典型的生态项目：

React 集成

Tippy.js 提供了官方的 React 组件库 @tippyjs/react：

npm install @tippyjs/react

使用示例：

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

const MyComponent = () => (
  <Tippy content="这是一个 React 工具提示">
    <button>按钮</button>
  </Tippy>
);

Ember 集成

虽然不是官方支持，但有一个非官方的 Ember 插件 ember-tippy：

ember install ember-tippy

使用示例：

{{#tippy-tooltip content="这是一个 Ember 工具提示"}}
  <button>按钮</button>
{{/tippy-tooltip}}

通过这些集成，你可以轻松地将 Tippy.js 的功能添加到你的项目中，提升用户体验。