您好!欢迎来到源码码网

前端实用工具库——轻量的纯 JavaScript 动态提示工具插件库

  • 开发工具
  • 来源:源码码网
  • 编辑:admin
  • 时间:2020-09-25 13:38
  • 阅读:305

Tippyjs轻量的纯 JavaScript 动态提示工具插件库。它提供了大量的不同悬停效果和超过 20 个可定制的选项。Tippy.js 是超级轻量的,具有相当不错的浏览器兼容性:

Tippyjs


Github

//文档:https://atomiks.github.io/tippyjs/
//Github: https://github.com/atomiks/tippyjs

功能特性

Tippy.js


Tippy.js是由Popper.js支持的高度可定制的工具提示和弹出库。

  • 智能定位引擎

优化的定位引擎,可防止翻转和溢出

  • 高性能

在低端设备也能够保持很高的性能

  • 多功能

适用于鼠标,键盘和触摸输入

  • 无障碍

兼容WAI-ARIA

  • 主题化的

通过自定义CSS样式,包括额外的主题和动画

  • 插件化

使用插件增强功能

  • 轻量级

最小化包的大小

  • Typescript的支持

开箱即用的TypeScript支持

  • 支持IE11 +

与99%的台式机和97%的移动用户兼容

默认示例

它具有#333的背景色和指向该元素的箭头,并且由鼠标输入或焦点事件触发,因此它会在悬停时显示,通过键盘导航聚焦或在使用触摸设备时轻击。

前端实用工具库——轻量的纯 JavaScript 动态提示工具插件库


<button id="myButton">My Button</button>
tippy('#myButton', {
 content: "I'm a Tippy tooltip!"
});

安装

常用npm或者yarn安装使用

# npm
npm i tippy.js
# Yarn
yarn add tippy.js
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

使用

  • 创建tooltips

给在你想要的标签元素上添加data-tippy-content属性

<button data-tippy-content="Tooltip">Text</button>
<button data-tippy-content="Another Tooltip">Text</button>

或者

tippy('#singleElement', {
 content: 'Tooltip'
});
  • 自定义

tippy('button', {
 duration: 0,
 arrow: false,
 delay: [1000, 200]
});

也可以指定特定的属性

<button
 data-tippy-duration="0"
 data-tippy-arrow="false"
 data-tippy-delay="[1000, 200]"
>  Text</button>
  • HTML Content

内容道具可以接受字符串,元素或函数。

普通字符串:

tippy('button', {
 content: '<strong>Bolded content</strong>'
});

innerHtml:

<div id="template" style="display: none;">
 <strong>Bolded content</strong>
</div>
const template = document.getElementById('template');
tippy('button', {
 content: template.innerHTML
});

element:

可以传递元素本身,这对于使事件侦听器保持连接状态(或在框架控制内部元素时非常有用)

const template = document.getElementById('example');
template.style.display = 'block';
tippy(singleButton, {  content: template
});

Template linking:

如果您有多个引用,每个引用都有其自己的唯一模板,则可以通过以下方式将它们链接到关联的模板:

<button data-template="one">One</button>
<button data-template="two">Two</button>
<button data-template="three">Three</button>
<div style="display: none;">
 <div id="one">
   <strong>Content for `one`</strong>
 </div>
 <div id="two">
   <strong>Content for `two`</strong>
 </div>
 <div id="three">
   <strong>Content for `three`</strong>
 </div>
</div>
tippy('button', {
 content(reference) {    const id = reference.getAttribute('data-template');
   const template = document.getElementById(id);
   return template.innerHTML;
 }});

主题Themes

可以通过CSS进行任何自定义样式,本身提供了以下几个主题可供选择

  • light

  • light-border

  • material

  • translucent



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

    总结

    具体的使用方式还是具体的样式,都可以直接参照官方文档,个人认为这是独立组件中非常不错的一个小组件,enjoy it!

Tippy.js

特别声明:
1、如无特殊说明,内容均为本站原创发布,转载请注明出处;
2、部分转载文章已注明出处,转载目的为学习和交流,如有侵犯,请联系客服删除;
3、编辑非《源码码网》的文章均由用户编辑发布,不代表本站立场,如涉及侵犯,请联系删除;
全部评论(0)
推荐阅读
  • css中rel的属性值都有哪些,分别代表什么意思
  • css中rel的属性值都有哪些,分别代表什么意思
  • 在HTML中,元素的rel属性用于定义当前文档与被链接文档之间的关系。这个属性在CSS的上下文中经常与样式表关联,但rel属性的用途远不止于此。以下是一些常见的rel属性值及其意义:1、stylesheet:表示被链接的文档是一个样式表。这通常用于链接CSS文件。
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2024-03-28 12:28
  • 阅读:202
  • css中的z-index是什么意思,如何使用?
  • css中的z-index是什么意思,如何使用?
  • z-index是CSS属性,用于控制元素在页面中的层叠顺序。z-index的值决定了元素在垂直层面上的显示顺序,具有较高z-index值的元素会覆盖具有较低z-index值的元素。默认情况下,元素的z-index值是auto,这意味着元素的层叠顺序由其在文档流中的位置决定。在没有使用定位属性的情况下,后面出现的元素会覆盖前面出现的元素。
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2024-03-28 11:34
  • 阅读:20
  • PHP开发五种数据打印方式举例说明
  • PHP开发五种数据打印方式举例说明
  • 在PHP中,有几种常用的打印方式,包括:1、echo:用于输出一个或多个字符串。它是PHP语句,不是函数,因此没有返回值。例如:echo ”Hello, World!”; // 输出 ”Hello, World!”2、print:用于输出一个字符串。它需要一个参数,并需要使用圆括号。print函数在输出后有返回值,如果执行失败则返回f
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2024-01-18 23:09
  • 阅读:318
  • php开发判断字符串是否相等的方法
  • php开发判断字符串是否相等的方法
  • 本文介绍php开发中常用的字符串比较的方法,以PHP7.4为例,可以使用双等号,strcmp()方法,strcasemp()方法、strncasecmp()方法以及ctrncmp()方法,等进行判断,下边以”==”和strcmp()方法为例进行举例:// 定义插入的数据$data = [    ”name” &
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2024-01-18 21:04
  • 阅读:238
  • thinkphp6 No input file specified解决办法
  • thinkphp6 No input file specified解决办法
  • thinkphp6出现Noinputfilespecified错误基本上都是因为访问路径出错引起的,解决办法也很简单,打开public目录下的的.htaccess文件,对伪静态规则进行编辑,将:把:RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]改为:RewriteRule ^(.*)$ index.php [L,E=PATH_I
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2024-01-17 20:24
  • 阅读:152
联系客服
源码代售 源码咨询 素材咨询 联系客服
029-84538663
手机版

扫一扫进手机版
返回顶部