当前位置：首页 > 网页特效 > 其他

基于bootstrap 3的jQuery tooltip提示插件

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

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文件以及依赖文件。

```html
<link href="css/ggtooltip.css" rel="stylesheet" />
<script type="text/javascript" src="js/ggtooltip.js"></script>   
```             
基本的HTML结构如下：

```html
<a href="#"
    data-placement="top"
    data-title="sample tooltip text">
    link text
</a>    
```            
基本调用方法：

```html
$("a").ggtooltip();  
```              
####  Data Attributes
你可以通过ggtooltip.js在任何HTML元素上使用HTML5的data-属性来设置tooltip提示。

```html
<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被放置到触发元素之后。

```html
$("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的延迟时间都使用该数字。该对象的结构是：delay: { show: 500, hide: 100 }|

web299.com

基于bootstrap 3的jQuery tooltip提示插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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