Tippy.js 简介

什么是 Tippy.js

如果你正在浏览一个网站，当你将鼠标悬停在某个按钮或链接上时，会突然出现一个小框，为你提供有关该按钮的更多信息或提示——这个小框就叫做“ tooltip ”。

对于制作网站的人来说，要创建这样的工具提示并不总是那么简单。他们需要确保工具提示看起来很好，易于理解，而且适应所有类型的设备和屏幕尺寸。

这就是 Tippy.js 发挥作用的地方。它可以帮助网站开发人员轻松地添加这些工具提示到他们的网站。他们只需要告诉 Tippy.js 他们想显示什么内容和工具提示应该出现的位置，Tippy.js 就会处理其余的工作，确保它在各种设备上都能正常工作，并看起来很没美观。

与其他类似工具相比，它具有以下优点：

1. 针对 React 定制：它有一个专为为 React 应用程序定制的库的，因此与 React 组件的集成更为顺畅。
2. 高度可定制：开发者可以定制几乎所有方面的工具提示，从动画、触发方式、主题到位置等。
3. 无依赖性：它不依赖于其他外部库，从而减少了项目的复杂性。
4. 动画和效果：与其他许多工具提示库相比，Tippy.js 提供了多种内置的动画效果，而无需额外的配置。
5. 丰富的文档和社区支持：Tippy.js 有详细的文档，这意味着他们可以轻松找到需要的信息。

Github 项目地址： https://github.com/atomiks/tippyjs-react

官方文档地址： https://atomiks.github.io/tippyjs/

Tippy.js 能实现什么效果

Tippy.js 提供多种内置的样式，能满足大部分使用需求。如果你希望自定义， Tippy.js 也支持通过 css 自定义显示样式。

基础样式：

颜色背景：

渐变背景：

安装 Tippy.js

安装非常简单，只需使用 npm 或 yarn 即可：

npm install @tippyjs/react --legacy-peer-deps

或者

yarn add @tippyjs/react

安装完成后，在您的应用程序中，导入 tippy 模块和核心 CSS ：

import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css'; // 用于样式化（可选），若不导入，则为 Headless 无样式组件

使用 Tippy.js

基础使用实例

安装完成后，在需要使用的组件中，首先需要导入 tippy 模块和核心 CSS ：

import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css'; // 用于样式化（可选），若不导入，则为 Headless 无样式组件

一个完整的实例：

import React from 'react';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css'; // 用于样式化（可选），若不导入，则为 Headless 无样式组件

function MyComponent() {
  return (
    <div>
      <Tippy content="Hello, Tooltip!">
        <button>Hover over me</button>
      </Tippy>
    </div>
  );
}

export default MyComponent;

这将创建一个 button 标签，但我们将鼠标移动到 button 标签上时，就会显示一个提示信息：

设置显示位置

你可以通过 placement 参数来设置提示信息相对于其目标元素的显示位置。

例如，如果您想让提示信息显示在按钮的右侧，应设置 placement 为 "right"。

<Tippy content="This is a tooltip" placement="right">
  <button>Hover me</button>
</Tippy>

基本位置还可以设置为 top 、 left 、 bottom 。除了基本的位置，还有其他的定位选项，如 top-start, top-end, right-start, 等等，这些选项提供了更精确的定位。

不同的位置可以为您的用户提供更好的体验，确保工具提示信息不会被页面上的其他元素遮挡或者偏离屏幕。

设置动画效果

你可以通过animation参数来设置各种过渡动画效果。

当你为你的元素初始化 Tippy 时，如果不指定任何动画，它会使用默认的 fade 动画效果。如果你要使用其他动画效果，需要在文件顶部导入对应的动画样式。

例如，若要使用 scale-extreme效果，

import 'tippy.js/animations/scale-extreme.css';

<Tippy content={tooltipText} animation="scale-extreme">
    <button> ClickMe! </>
</Tippy>

Tippy 提供了一系列的格外动画效果可以选择：

你可以在这里预览各种动画效果： https://atomiks.github.io/tippyjs/#extra-included-animations

设置显示样式（内置主题）

你可以通过theme参数来设置内置的主题样式。

tippy.js 除了默认的样式外，还提供了一些内置的主题样式。这些主题可以帮助您快速地更改提示框的外观，而不需要手动编写大量的 CSS 。

要使用这些主题，您需要首先导入相关的 CSS。例如，如果您想要使用 light 主题，那么需要导入：

import 'tippy.js/themes/light.css'; # 导入对应的 css 文件

<Tippy content="提示内容" theme="light">
  <button>点我</button>
</Tippy>

以下是一些 tippy.js 的内置主题：

你可以在这里预览各种动画效果： https://atomiks.github.io/tippyjs/#themes

设置显示样式（自定义主题）

如果内置的主题不能满足你的需求，你可以创建自定义的主题。

定义 CSS 样式:

为你的自定义主题创建一个新的 CSS 样式。例如，我们可以创建一个名为 "my-theme" 的新主题：

.tippy-box[data-theme~='my-theme'] {
  background-color: #333;
  color: white;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

在上述样式中，[data-theme~='my-theme'] 选择器确保只有那些具有 data-theme 属性值为 "my-theme" 的 tippy 实例应用此样式。

应用自定义主题:

在你的 Tippy 组件中设置 theme prop 来应用你的自定义主题。

import Tippy from '@tippyjs/react';

function MyComponent() {
  return (
    <Tippy content="这是一个自定义主题的提示框" theme="my-theme">
      <button>悬停显示提示框</button>
    </Tippy>
  );
}

创建具有交互功能的提示信息

你可以通过interactive参数来设置内置的主题样式。

默认情况下，当用户尝试与提示框中的内容交互时，提示框会消失，因为它在用户的鼠标离开触发元素后默认就会关闭。当你将interactive 参数设置为true时，允许用户与提示信息中的内容进行交互，如点击其中的链接，填写表单等。

例如，假设你在提示框中有一个链接，或者一个小的表单，你希望用户能够点击那个链接或填写那个表单。在这种情况下，你需要设置interactive为true，这样提示框将保持打开状态，直到用户完成他们的交互为止。

使用方法如下：

<Tippy content="这里是链接或其他可以交互的内容" interactive={true}>
  <button>悬停在这里</button>
</Tippy>

当你使提示框变得可交互时，可能需要添加一些额外的样式或逻辑来确保提示框在用户与其内容进行交互时看起来和行为都是正确的。