前端轻量级的toolTip插件-Tippy.js

使用方法

在页面中引入tippy.js和tippy.css文件。

<link rel="stylesheet"href="css/tippy.css">
<script src='path/to/tippy.js'></script>

HTML结构

你需要为使用tooltip的元素设置一个title属性，这个属性中的内容就是tooltip的内容。

<button class="btn tippy" title="I'm a tooltip!">tooltip测试</button>

初始化插件

在页面DOM元素加载完毕之后，通过new Tippy()方法来实例化tooltip。

newTippy('.tippy')

一个完整的使用tippy.js的HTML文档的结构如下：

<!DOCTYPE html>
<html><head><link rel="stylesheet"href="tippy.css"></head><body><button id="myId"title="Tooltip text">Button text</button><script src="tippy.js"></script><script>new Tippy('#myId')</script></body>
</html>

配置参数

你可以在实例化Tippy对象时以对象的方式传入配置参数，例如：

newTippy('.tippy', { position: 'right', animation: 'fade'})

也可以在HTML中直接以data-*的方式来使用配置参数：

<button class="btn tippy" title="I'm a tooltip!"data-animatefill="false"data-animation="scale"data-position="bottom">Overridden</button>

Tippy.js所有可用的配置参数如下：

参数	默认值	可选值	描述
position	'top'	'top' 'bottom' 'left' 'right'	指定tooltip出现的位置。
trigger	'mouseenter focus'	'mouseenter' 'focus' 'click' 'manual'	指定触发tooltip的事件。
interactive	false	true false	toltip是否可互动。
delay	0	>=0的整数	指定多少毫秒之后才显示tooltip。
animation	'shift'	'shift' 'perspective' 'fade' 'scale' 'none'	指定tooltip的动画类型。
arrow	false	true false	是否在tooltip上显示箭头。
animateFill	true	true false	添加material design风格的动画。如果arrow设置为true，该选项无效。
duration	400	>=0的整数	tooltip的持续动画时间。
html	false	false或模板的id	是否允许在tooltip中显示html模板内容。
theme	'dark'	'dark' 'light'	tooltip的主题。
offset	0	任何数值	tooltip的偏移值，单位像素。
hideOnClick	true	true false	指定是否在悬停后单击其元素时隐藏tooltip。

事件

Tippy.js提供了4个可用的回调函数：

newTippy('.tippy', {beforeShown:function() {// When the tooltip has been triggered and has started to transition in
  },shown:function() {// When the tooltip has fully transitioned in and is showing
  },beforeHidden:function() {// When the tooltip has begun to transition out
  },hidden:function() {// When the tooltip has fully transitioned out and is hidden
  }
})

官方GitHub : https://github.com/atomiks/tippyjs

转载于:https://www.cnblogs.com/tianyamike/p/10365374.html

前端轻量级的toolTip插件-Tippy.js相关推荐

jquery轻量级数字动画插件 —— countUp.js
CountUp.js是一个无依赖,轻量级的JavaScript"类",可用于快速创建以更有趣的方式显示数字数据的动画. 该JS插件下载地址:https://github.com/i ...
react 原生html 插件,纯原生JS的瀑布流插件Macy.js，前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
轻量级的jQuery表单验证插件 - HAPPY.js
为什么80%的码农都做不了架构师?>>> 日期:2012-9-14 来源:GBin1.com 在线演示本地下载功能强大的表单验证插件很多,以前我们介绍过validati ...
cropper.js 图像旋转问题_JavaScript开源良心插件，纯前端网页图片剪裁插件——cropperjs...
介绍 cropperjs是一款基于JavaScript的网页端图片裁剪插件,可能相对于图片预览来说,图片的裁剪使用场景貌似并不是很多,但是图片预览插件又要比裁剪插件容易找到,而且从实现难度上来说也不及 ...
轻量级的jQuery表单校验插件: Happy.js
当前已经有许多jQuery表单校验插件,并且有些也很不错,但这些插件功能太强大,使用比较复杂.如果你想找一个简单点的插件 Happy.js 刚好是一个很好的选择. 这个插件是轻量级的,所以只支持一些输 ...
轻量级Modal模态框插件cta.js
今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览源码下载实现的代码. html代码: <se ...
php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤本日历插件支持cmd模块化如下调用:xvDate( ...
html5 tooltips,纯js轻量级tooltips工具提示插件
html5tooltipsjs是一款使用纯javacript编写的轻量级tooltips工具提示插件.该tooltips插件不依赖任何框架,内容可带HTML标签,并可以使用预设的CSS3动画来制作to ...
animejs走马灯_web前端攻城狮超爱的JS动画库插件—anime.js
作为一名web前端攻城狮,除了完成日常业务逻辑处理之外,也会去注重一些用户体验交互的问题.特别是如今web前端的发展很快,很多优秀js插件层出不穷.对于web前端开发者,也要会利用这些现有的js插件, ...