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

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

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

image.png

什么是 Tippy.js

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

Tippy.js 提供了哪些效果

Default

默认的提示如下所示:image.png它由mouseenterfocus事件触发,因此在悬停、通过键盘导航聚焦或在使用触摸设备时点击时出现。

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

<button id="myButton">My Button</button>

您可以像这样初始化它:

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

Placements

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

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

Arrows

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

image.png

tippy(button, {
  // default
  arrow: true,
});

Animations

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

tippy(button, {
  // default
  animation: 'fade',
});

Extra included animationsimage.pngInertia / slingshot elastic effect

CSS 弹簧物理添加到动画中 transition-timing-functionimage.png

Themes

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

tippy(button, {
  theme: 'light',
});

Included themes

这些主题,可以单独导入image.png

Triggers

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

tippy(button, {
  // default
  trigger: 'click',
});

Interactivity

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

tippy(button, {
  interactive: true,
});

HTML Content

您的提示可以包含 HTMLimage.png

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

Delay

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

image.png

tippy(button, {
  delay: 500, // ms
});

Follow Cursor

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

image.png

tippy(button, {
  followCursor: true,
});

SVGs

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

Nesting

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

image.png

如何安装使用

官方提供了两种安装方式,一种是 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>
);
相关文章
|
3月前
|
存储 前端开发 JavaScript
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
|
7天前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
45 10
|
4天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
12 4
|
30天前
|
机器学习/深度学习 自然语言处理 JavaScript
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
在信息论、机器学习和统计学领域中,KL散度(Kullback-Leibler散度)是量化概率分布差异的关键概念。本文深入探讨了KL散度及其相关概念,包括Jensen-Shannon散度和Renyi散度。KL散度用于衡量两个概率分布之间的差异,而Jensen-Shannon散度则提供了一种对称的度量方式。Renyi散度通过可调参数α,提供了更灵活的散度度量。这些概念不仅在理论研究中至关重要,在实际应用中也广泛用于数据压缩、变分自编码器、强化学习等领域。通过分析电子商务中的数据漂移实例,展示了这些散度指标在捕捉数据分布变化方面的独特优势,为企业提供了数据驱动的决策支持。
51 2
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
|
1月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
53 1
|
1月前
|
前端开发 JavaScript Go
JS基础:输出信息的5种方式详解
JS基础:输出信息的5种方式详解
28 1
|
30天前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
34 0
|
3月前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转及跳转传参
JavaScript 地址信息与页面跳转及跳转传参
31 1
|
3月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
|
3月前
|
自然语言处理 JavaScript 前端开发
【走向世界】Vue.js国际化:打造无国界应用,让爱与信息跨越语言的边界!
【8月更文挑战第30天】本文详细介绍了Vue.js中实现国际化的多种方法及最佳实践。通过使用`vue-i18n`等第三方库,开发者能够轻松地为应用添加多语言支持,优化用户体验并扩大市场覆盖范围。文章涵盖从基本配置、动态加载语言包到考虑文化差异等方面的内容,帮助读者构建真正全球化且无缝多语言体验的应用程序。
95 0