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

纯js轻量级tooltips工具提示插件

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

演示免费下载

简介

html5tooltipsjs是一款使用纯javacript编写的轻量级tooltips工具提示插件。该tooltips插件不依赖任何框架，内容可带HTML标签，并可以使用预设的CSS3动画来制作tooltips动画效果。

####  使用方法

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

#####  基本使用方法
最简单的在某个元素上显示tooltips的方法是在这个元素上添加data-*属性。

```html
 
```
##### 高级使用方法
你也可以通过JavaScript来调用该tooltips插件。

```html
html5tooltips({
  contentText: "Refresh",
  targetSelector: "#refresh"
});     
```           
你可以指定tooltips在元素的什么方向上出现。

```html
html5tooltips({
  contentText: "Refresh",
  stickTo: "right",
  targetSelector: "#refresh"
});    
```            
你还可以在tooltips中添加额外的说明文本。这些文本会在元素聚焦时显示。这个特性用于在输入框或可编辑字段中使用。你可以使用HTML标签。

```html
html5tooltips({
 contentText: "Not less then 8 symbols",
 contentMore: "Use lower and UPPER case letters, 
 num6ers and 
 spec!al symbols 
 to make password safe and secure.",
 maxWidth: "180px",
 targetSelector: "#password"
}); 
``` 
你可以定义多个tooltips，每个tooltips在参数数组中作为一个对象。

```html
html5tooltips([
  {
    contentText: "Delete",
    targetSelector: "#delete"
  },
  {
    contentText: "Refresh",
    stickTo: "top",
    targetSelector: "#refresh"
  },
  {
    contentText: "Simple to remember",
    contentMore: "Check that your login name is not used by anyone else.",
    stickTo: "left",
    maxWidth: "180px",
    targetSelector: "#username"
  }
]);   
```             
####  配置参数

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

- animateFunction：tooltips可用的CSS3动画类型。可用的动画有：fadein，foldin，foldout，roll，scalein，slidein，spin。
- color：tooltips可用的预定义颜色。可用值有：daffodil, daisy, mustard, citrus-zest, pumpkin, tangerine, salmon, persimmon, rouge, scarlet, hot-pink, princess, petal, lilac, lavender, violet, cloud, dream, gulf, turquoise, indigo, navy, sea-foam, teal, peacock, ceadon, olive, bamboo, grass, kelly, forrest, chocolate, terra-cotta, camel, linen, stone, smoke, steel, slate, charcoal, black, white, metalic-silver, metalic-gold, metalic-copper，或者任何CSS颜色。
- contentText：tooltip的内容，可以是HTML标签。
- contentMore：tooltip中显示的更多内容，会在元素聚焦时显示。
- disableAnimation：是否禁用动画。
- stickTo：tooltip显示的位置。可用值有bottom，left，right和top。
- stickDistance：tooltip和目标元素之间的距离，单位像素。
- targetSelector：目标元素的CSS选择器。
- targetXPath：目标元素的xPath值。
- maxWidth：tooltip的扩展文本的最大宽度。
####  可用的data-*属性
- data-tooltip：与contentText参数相同。
- data-tooltip-animate-function：与animateFunction参数相同。
- data-tooltip-color：与color参数相同。
- data-tooltip-more：与contentMore参数相同。
- data-tooltip-stickto：与stickTo参数相同。
- data-tooltip-maxwidth：与maxWidth参数相同。

web299.com

纯js轻量级tooltips工具提示插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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