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的延迟时间都使用该数字。

该对象的结构是：delay: { show: 500, hide: 100 }