基于bootstrap 3的jQuery tooltip提示插件

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=""