ggtooltip.js是一款非常实用的基于bootstrap 3.X的jQuery tooltip提示插件。该jQuery tooltip插件实用简单,支持在4个方向上像素tooltip信息,支持修改tooltip的背景色、前景色和边框颜色。它的特点有:
- 支持4个上下左右4个方向显示tooltip。
- 不限制背景颜色。
- 不限制字体颜色。
- 可以自由设置tooltip的边框颜色。
- 支持各种触发tooltip的事件,如:click、hover、focus 或手动触发。
- 基于HTML5、CSS3和jQuery制作。
使用方法
HTML结构
引入ggtooltip.css和ggtooltip.js文件以及依赖文件。
<link href="css/ggtooltip.css" rel="stylesheet" /> <script type="text/javascript" src="js/ggtooltip.js"></script>
基本的HTML结构如下:
<a href="#" data-placement="top" data-title="sample tooltip text"> link text </a>
基本调用方法:
$("a").ggtooltip();
Data Attributes
你可以通过ggtooltip.js
在任何HTML元素上使用HTML5的data-
属性来设置tooltip提示。
<a href="#" data-placement="top" data-title="sample tooltip text"> link text </a>
This plugin uses the HTML5 data-api that enables to maintain the validaity of HTML code elements w.r.t W3C validation standards.
使用jQuery调用
该jQuery tooltip 插件根据需求来产生tooltip内容,默认情况下,tooltip被放置到触发元素之后。
$("a").ggtooltip(); // code to initialize with defaults $("a").ggtooltip({ textcolor : "#000000" }); // "textcolor" parameter with value "#000000" $("a").ggtooltip({ textcolor : "#000000", placement : "right" }); // multiple parameters
API中使用标准的JSON键值对{ key: value }
,中间逗号分隔来设置ggtooltip的属性。
配置参数
以下的配置参数可以通过data-
属性或javascript来设置。对于data属性,将参数添加到data-
后面,例如:data-backcolor=""
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
animation | boolean | true | 运行tooltip使用CSS淡入淡出的过渡效果 |
html | boolean | false | 在tooltip中插入HTML代码。如果为false ,jQuery的text 方法将被使用来在DOM中插入内容。Use text if you're worried about XSS attacks. |
placement | string | function | 'top' | 设置tooltip的位置-top | bottom | left | right | auto. 如果指定为"auto",插件会动态调整tooltip。例如,如果设置为"auto left",tooltip将会尽可能的显示在左边,如果显示不了,它就会显示在右边。 |
selector | string | false | 如果提供了一个选择器,tooltip对象将委派指定的目标元素。 |
title | string | function | '' | 如果title 属性没有指定,使用该默认的title。 |
backcolor | string | '#000000' | 背景颜色的名字或Hex-code。 |
textcolor | string | '#ffffff' | 前景颜色的名字或Hex-code。 |
bordercolor | string | '#ffffff' | tooltip边框颜色的名字或Hex-code。 |
trigger | string | 'hover focus' | 设置触发tooltip的事件 - click | hover | focus | manual。可以设置多重触发事件,使用空格将事件分开。 |
delay | number | object | 0 |
tooltip显示和隐藏的延迟时间,单位毫秒,不支持手动触发类型。 如果提供了一个number,hide/show的延迟时间都使用该数字。 该对象的结构是: |
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!