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

Posted 2021-04-17 编程言一

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

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

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

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

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

兼容WAI-ARIA

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

使用插件增强功能

最小化包的大小

开箱即用的TypeScript支持

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

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

常用npm或者yarn安装使用

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

或者

也可以指定特定的属性

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

普通字符串：

innerhtml：

element:

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

Template linking:

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

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

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

点击下方阅读全文加入我的学习群即可零基础学前端 ↓ ↓ ↓