web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
弹出层
纯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, num
6
ers 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参数相同。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告