Tippy.js 使用教程
tippyjsTooltip, popover, dropdown, and menu library项目地址:https://gitcode.com/gh_mirrors/ti/tippyjs
项目介绍
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 的功能添加到你的项目中,提升用户体验。
tippyjsTooltip, popover, dropdown, and menu library项目地址:https://gitcode.com/gh_mirrors/ti/tippyjs