推荐一款前端轻量级的toolTip插件-Tippy.js

最新推荐文章于 2023-06-08 15:28:09 发布

付出总会有收获

最新推荐文章于 2023-06-08 15:28:09 发布

阅读量4.7k

点赞数

分类专栏： Html5

Html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

安利一款轻量的tooltip插件，使用简单，扩展性好，而且作者一直都有更新维护，用在项目中最好不过了。

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

CSDN下载插件： http://download.csdn.net/download/qq_25835645/10147435

简要教程(如下) ：

安装

可以通过npm来安装在Tippy.js插件。

 
         npm install --save 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。

 
         new 
         Tippy( 
         '.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对象时以对象的方式传入配置参数，例如：

 
    
         new 
         Tippy( 
         '.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个可用的回调函数：

 
         new 
         Tippy( 
         '.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 
        
         } 
        
         })

付出总会有收获

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
推荐一款前端轻量级的toolTip插件-Tippy.js

安利一款轻量的tooltip插件，使用简单，扩展性好，而且作者一直都有更新维护，用在项目中最好不过了。官方GitHub : https://github.com/atomiks/tippyjs简要教程(如下) ：安装可以通过npm来安装在Tippy.js插件。npm install --save t
复制链接

扫一扫