当前位置：首页 > 网页特效 > 弹出层

Tippy.js-纯js tooltip工具提示插件

分类：弹出层日期：2024-05-14 点击(1) 评论(0)

演示免费下载

简介

Tippy.js是一款轻量级的纯js tooltip工具提示插件。该tooltip插件功能强大，提供多种动画效果和主题效果，并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。

####  安装

------------

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

```html
npm install --save tippy.js     
```             
####  使用方法

------------

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

```html
<link rel="stylesheet" href="css/tippy.css">
<script src='path/to/tippy.js'></script>      
```            
####  HTML结构

------------

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

```html
<button class="btn tippy" title="I'm a tooltip!">tooltip测试</button>  
```              
####  初始化插件

------------

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

```html
new Tippy('.tippy')   
```       
一个完整的使用tippy.js的HTML文档的结构如下：

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

```html
new Tippy('.tippy', { position: 'right', animation: 'fade' })       
```           
也可以在HTML中直接以data-*的方式来使用配置参数：

```html
<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个可用的回调函数：

```html
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
  }
})         
```

web299.com

Tippy.js-纯js tooltip工具提示插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果