ggtooltip.js是一款非常实用的基于bootstrap 3.X的jQuery tooltip提示插件。该jQuery tooltip插件实用简单,支持在4个方向上像素tooltip信息,支持修改tooltip的背景色、前景色和边框颜色。它的特点有:

  • 支持4个上下左右4个方向显示tooltip。
  • 不限制背景颜色。
  • 不限制字体颜色。
  • 可以自由设置tooltip的边框颜色。
  • 支持各种触发tooltip的事件,如:click、hover、focus 或手动触发。
  • 基于HTML5CSS3jQuery制作。

使用方法

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 }