Tippy.js 玩转鼠标悬停提示信息,真的能玩出花来

·  阅读 1587
Tippy.js 玩转鼠标悬停提示信息,真的能玩出花来

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

网页设计师对 tooltips 鼠标经过提示效果应该不陌生,这种效果虽然可以直接用 css hover 来实现,但是如果想更友好的、更美观的效果,可能就要借助 JS 来实现啦。今天和大家分享的 Tippy.js 就是很不错的鼠标悬停插件,多种提示信息用法及样式,并且是轻量级哦 🐟

什么是 Tippy.js

Tippy.js 是完整的工具提示弹出窗口下拉菜单Web 菜单解决方案,由Popper提供支持。它提供了从文档流中“弹出”并漂浮在目标元素旁边的元素的逻辑和可选样式。

Tippy.js 提供了哪些效果

Default

默认的提示如下所示:

它由mouseenterfocus事件触发,因此在悬停、通过键盘导航聚焦或在使用触摸设备时点击时出现。

在文档上有一个按钮元素,如下所示:

<button id="myButton">My Button</button>
复制代码

您可以像这样初始化它:

tippy('#myButton', {
  content: "I'm a Tippy tooltip!",
});
复制代码

Placements

您的tippy可以相对于参考元素以四种基本方式放置,还可以沿着对应的轴线移动

tippy(button, {
  // default
  placement: 'top-start',
});
复制代码

Arrows

可以修改指向元素箭头形状大小等,设置多种类型

tippy(button, {
  // default
  arrow: true,
});
复制代码

Animations

你的tippy可以有任何类型的过渡动画。默认情况下,它是一个简单的 fade不透明度转换

tippy(button, {
  // default
  animation: 'fade',
});
复制代码

Extra included animations

Material filling effect

Inertia / slingshot elastic effect

CSS 弹簧物理添加到动画中 transition-timing-function

CSS keyframe animations

您可以使用实际的 CSS 动画(@keyframes 规则),例如使用 animate.css 包:

Themes

你的 tippy 可以有自定义样式。

tippy(button, {
  theme: 'light',
});
复制代码

Included themes

这些主题,可以单独导入

Custom themes

您可以通过主题将任何 CSS 应用于提示。

Triggers

你可以通过各种不同的事件:clickfocus 等任何其他事件触发:

tippy(button, {
  // default
  trigger: 'click',
});
复制代码

Interactivity

您的 tippy 可以是交互式的,允许您将鼠标悬停在上面并在其中单击。

tippy(button, {
  interactive: true,
});
复制代码

HTML Content

您的提示可以包含 HTML

tippy(button, {
  content: '<strong>Bolded <span style="color: aqua;">content</span></strong>',
  allowHTML: true,
});
复制代码

Delay

您的提示可以在触发后延迟隐藏或显示。

tippy(button, {
  delay: 500, // ms
});
复制代码

Follow Cursor

您的 tippy 可以跟随鼠标光标移动

tippy(button, {
  followCursor: true,
});
复制代码

SVGs

您的 tippy 可以放置在 SVG 节点上,在这里 followCursor: 'initial'变得非常有用,因为它可以直接放置在行上。

Nesting

一个 tippy 可以嵌套在另一个 tippy 中。

如何安装使用

官方提供了两种安装方式,一种是 Package Manager ,一种是 CDN:

1.Package Manager

# npm
npm i tippy.js

# Yarn
yarn add tippy.js
复制代码
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // optional for styling
复制代码

2.CDN

<!-- Development -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<!-- Production -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
复制代码
<html>
  <head>
    <title>Tippy</title>
  </head>
  <body>
    <button id="myButton">My button</button>

    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
      // With the above scripts loaded, you can call `tippy()` with a CSS
      // selector and a `content` prop:
      tippy('#myButton', {
        content: 'My tooltip!',
      });
    </script>
  </body>
</html>
复制代码

Vue 中如何使用

这么强大的 js 库怎么会没有 vue 版本呢?vue 版本链接:https://kabbouchi.github.io/vue-tippy/4.0/getting-started.html

# 安装
npm install --save vue-tippy@v4
yarn add vue-tippy@v4
复制代码
//vue 中使用
import Vue from "vue";
import VueTippy, { TippyComponent } from "vue-tippy";

Vue.use(VueTippy);
// or
Vue.use(VueTippy, {
  directive: "tippy", // => v-tippy
  flipDuration: 0,
  popperOptions: {
    modifiers: {
      preventOverflow: {
        enabled: false
      }
    }
  }
});

Vue.component("tippy", TippyComponent);
复制代码

react 中使用

react 版本链接:https://github.com/atomiks/tippyjs-react

# npm
npm i @tippyjs/react

# Yarn
yarn add @tippyjs/react

复制代码
// react 中使用
import React from 'react';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css'; // optional

const StringContent = () => (
  <Tippy content="Hello">
    <button>My button</button>
  </Tippy>
);

const JSXContent = () => (
  <Tippy content={<span>Tooltip</span>}>
    <button>My button</button>
  </Tippy>
);

复制代码

写在最后

公众号前端开发爱好者 专注分享 web 前端相关技术文章视频教程资源、热点资讯等,如果喜欢我的分享,给 🐟🐟 点一个 👍 或者关注 ➕ 都是对我最大的支持。

分类:
前端
收藏成功!
已添加到「」, 点击更改