tippy-box 是一个轻量级的、易于使用的、自定义程度高的提示框(Tooltip)库。它具有丰富的样式选项，可以轻松地创建出独特且吸引人的提示框。tippy-box 支持多种动画效果和预设的提示框位置，使得在 Web 应用中实现提示框功能变得简单快捷。

特点

  • 轻量级：tippy-box 文件体积小，加载速度快，不会对页面性能产生太大影响。
  • 易于使用：通过简单的 HTML、CSS 和 JavaScript 代码，即可快速创建出提示框。
  • 自定义程度高：提供了丰富的 CSS 类和属性，可以轻松地定制提示框的样式和行为。
  • 支持多种动画效果：如淡入淡出、缩放等，让提示框更加生动有趣。
  • 支持多种预设的提示框位置：如顶部、底部、左侧、右侧等，满足各种场景需求。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tippy Box Example</title>
<link href="https://unpkg.com/tippy.css@7.2.1/dist/tippy-bundle.min.css" rel="stylesheet">
<script src="https://unpkg.com/tippy.js@7.2.1"></script>
</head>
<body>
<button data-tippy-content="这是一个提示框！">点击我</button>

<script>
tippy('[data-tippy-content]', {
content: '这是一个提示框！',
arrow: true,
delay: [500, null], // 在鼠标移入后延迟显示提示框，第一个值为延迟时间，第二个值为毫秒数，默认为 null。
distance: [10, null], // 当提示框离鼠标的距离小于这个值时才显示，第一个值为距离值，第二个值为毫秒数，默认为 null。
flipOnUpdate: true, // 当内容发生变化时是否翻转提示框的位置，默认为 false。
arrowType: 'round', // 箭头的形状，可选值有 'sharp'(尖角)、'round'(圆形)、'square'(正方形),默认为 'round'。
allowNode: true, // 是否允许将提示框附加到非元素节点上，默认为 false。
animation: ['fade'], // 提示框的动画类型，默认为 'fade'(淡入淡出)。
popperOptions: {} // Tippy Popper.js 的配置选项，例如限制提示框的大小、设置背景颜色等。
});
</script>
</body>
</html>

在这个示例中，我们创建了一个带有自定义样式的提示框，当鼠标悬停在按钮上时，提示框会显示出来。通过 tippy-box 提供的丰富选项，我们可以轻松地定制提示框的各种行为和样式。