JQuery Tooltipster

一、简介

A powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS.

一款强大的、灵活的JQuery插件，您可以通过使用强大的CSS轻松地创建各种Tooltip。

具体地址：http://calebjacob.com/tooltipster/

二、使用

1. 在页面上<head>标签中添加如下代码

<head>
...

    <link rel="stylesheet" type="text/css" href="css/tooltipster.css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>

...
</head>

2. 对标签的title和class属性进行设置

<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />

<a href="http://calebjacob.com" class="ketchup tooltip" title="This is my link's tooltip message!">Link</a>

<div class="tooltip" title="This is my div's tooltip message!"> 
    <p>This div has a tooltip when you hover over it!</p>
</div>

3. 启用tooltipster

<head>

...

    <script>
        $(document).ready(function() {
            $('.tooltip').tooltipster();
        });
    </script>
</head>

三、自定义

1. 使用带标签的Tooltip

<a href="#" class="tooltip" title="<img src='my-image.png' width='100' height='100' /> Here is an image and <b>bold text!</b>">Link</a>

2. 自定义Style

.my-custom-theme {
	border-radius: 5px; 
	border: 2px solid #000;
	background: #4c4c4c;
	color: #fff;
}

/* Use this next selector to style things like font-size and line-height: */
.my-custom-theme .tooltipster-content {
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 16px;
	padding: 8px 10px;
}

并使用如下方式初始化

$('.tooltip').tooltipster({
    theme: '.my-custom-theme'
});

3. 自定义tooltipster的功能

$('.tooltip').tooltipster({
   animation: 'fade',
   arrow: true,
   arrowColor: '',
   content: '',
   delay: 200,
   fixedWidth: 0,
   maxWidth: 0,
   functionBefore: function(origin, continueTooltip) {
      continueTooltip();
   },
   functionReady: function(origin, tooltip) {},
   functionAfter: function(origin) {},
   icon: '(?)',
   iconDesktop: false,
   iconTouch: false,
   iconTheme: '.tooltipster-icon',
   interactive: false,
   interactiveTolerance: 350,
   offsetX: 0,
   offsetY: 0,
   onlyOne: true,
   position: 'top',
   speed: 350,
   timer: 0,
   theme: '.tooltipster-default',
   touchDevices: true,
   trigger: 'hover',
   updateAnimation: true
});

四、功能说明

名称类型说明

animation fade, grow, swing, slide, fall 说明Tooltip显示和消失的效果，默认:'fade'

arrow boolean 说明Tooltip显示的时候是否有箭头指向，默认：true

arrowColor hex code/rgb 说明箭头的颜色，默认：从tooltip背景色继承

content string tooltip内容，默认：空

fixedWidth integer 固定宽度，默认：0(AutoSize)

maxWidth integer 最大宽度，默认：0(没有最大宽度)

functionBefore function 默认：function(origin, continueTooltip) { continueTooltip(); }

functionReady function 默认：function(origin, tooltip) {}

functionAfter function 默认：function(origin) {}

icon string 如果设置了iconDesktop或者iconTouch选项，这里设置图标内容，默认： '(?)'

iconTheme CSS class 如果设置了iconDesktop或者iconTouch选项，这里设置icon的css， 默认： '.tooltipster-icon'

iconDesktop boolean 在内容旁边生成一个图标，用于在非触摸设备上激活Tooltip，默认：false

iconTouch boolean 在内容旁边生成一个图标，用于在触摸设备上激活Tooltip，默认：false

interactive boolean 设置tooltip显示之后是否延迟关闭以便用户可以与tooltip互动，如点击tooltip中含有连接。默认：false

interactiveTolerance integer 设置一个时间段，鼠标离开tooltip源之后，一段时间内没有移动到tooltip上，则关闭tooltip，默认：350

offsetX integer 设置tooltip在横向上的距离（像素），默认：0

offsetY integer 设置tooltip在纵向上的距离（像素），默认：0

onlyOne boolean 设置tooltip是否在同一时间只显示一个，默认：true

position right, left, top, top-right, top-left,
bottom, bottom-right, bottom-left 设置tooltip的位置，默认：'top'

speed integer 显示速度，默认：350

timer integer 设置tooltip在关闭之前显示多长时间，默认：0

theme CSS class 设置tooltip使用的主题，默认：'.tooltipster-default'

touchDevices boolean 如果为true,tooltip将会运行在触摸设备上，默认：true

trigger hover, click, custom 设置tooltip如何被显示，具体如何使用custom可参考高级部分，默认：'hover'

updateAnimation boolean 当tooltip显示时，内容更新，当内容更新是显示动画，默认：true

名称	类型	说明
animation	fade, grow, swing, slide, fall	说明Tooltip显示和消失的效果，默认:'fade'
arrow	boolean	说明Tooltip显示的时候是否有箭头指向，默认：true
arrowColor	hex code/rgb	说明箭头的颜色，默认：从tooltip背景色继承
content	string	tooltip内容，默认：空
fixedWidth	integer	固定宽度，默认：0(AutoSize)
maxWidth	integer	最大宽度，默认：0(没有最大宽度)
functionBefore	function	默认：function(origin, continueTooltip) { continueTooltip(); }
functionReady	function	默认：function(origin, tooltip) {}
functionAfter	function	默认：function(origin) {}
icon	string	如果设置了iconDesktop或者iconTouch选项，这里设置图标内容，默认： '(?)'
iconTheme	CSS class	如果设置了iconDesktop或者iconTouch选项，这里设置icon的css，默认： '.tooltipster-icon'
iconDesktop	boolean	在内容旁边生成一个图标，用于在非触摸设备上激活Tooltip，默认：false
iconTouch	boolean	在内容旁边生成一个图标，用于在触摸设备上激活Tooltip，默认：false
interactive	boolean	设置tooltip显示之后是否延迟关闭以便用户可以与tooltip互动，如点击tooltip中含有连接。默认：false
interactiveTolerance	integer	设置一个时间段，鼠标离开tooltip源之后，一段时间内没有移动到tooltip上，则关闭tooltip，默认：350
offsetX	integer	设置tooltip在横向上的距离（像素），默认：0
offsetY	integer	设置tooltip在纵向上的距离（像素），默认：0
onlyOne	boolean	设置tooltip是否在同一时间只显示一个，默认：true
position	right, left, top, top-right, top-left, bottom, bottom-right, bottom-left	设置tooltip的位置，默认：'top'
speed	integer	显示速度，默认：350
timer	integer	设置tooltip在关闭之前显示多长时间，默认：0
theme	CSS class	设置tooltip使用的主题，默认：'.tooltipster-default'
touchDevices	boolean	如果为true,tooltip将会运行在触摸设备上，默认：true
trigger	hover, click, custom	设置tooltip如何被显示，具体如何使用custom可参考高级部分，默认：'hover'
updateAnimation	boolean	当tooltip显示时，内容更新，当内容更新是显示动画，默认：true

五、高级应用

1. 常用Tooltipster API

Tooltipster API是以灵活、易用为原则创建的。通过API，使用者可以创建

自定义触发函数：Custom Trigger、

更新Tooltip内容：Update Tooltip Content、

功能性销毁Tooltipster：Destory Tooltipster Functionality、

显示唯一性：Reposition Tooltips For Unique Use Case。

下面看一些API函数:

// show a tooltip
$(...).tooltipster('show');

// hide a tooltip
$(...).tooltipster('hide');

// temporarily disable a tooltip from being able to open
$(...).tooltipster('disable');

// if a tooltip was disabled from opening, reenable its previous functionality
$(...).tooltipster('enable');

// hide and destroy tooltip functionality
$(...).tooltipster('destroy');

// update tooltip content
$(...).tooltipster('update', 'My new content');

// reposition and resize the tooltip
$(...).tooltipster('reposition');

需要注意的是,不要使用tooltips本身来调用这些方法,可以使用生成Tooltips的控件调用这些方法,也可以调用一个容器,使他内部的所有控件可以触发这些函数,看看下面的例子:

// show all tooltips belonging to origins with the class .tooltip
$('.tooltip').tooltipster('show');

// hide all open tooltips in the body
$('body').tooltipster('hide');

// update a single tooltip's content (whether the tooltip is open or not)
$('#my-unique-origin').tooltipster('update', 'My new content');

2. 使用Ajax生成Tooltip内容

使用者可以通过Tooltipster在tooltips运行之前调用自定义的同步或者异步方法。一个很有用的方式是：通过Ajax为tooltips获取动态的内容。

下面一个例子，在functionBefore函数中，异步地使用Ajax调用替换掉加载提示。

$('.tooltip').tooltipster({
   content: 'Loading...',
   functionBefore: function(origin, continueTooltip) {
   
      // we'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
      continueTooltip();
        
      // next, we want to check if our data has already been cached
      if (origin.data('ajax') !== 'cached') {
         $.ajax({
            type: 'POST',
            url: 'example.php',
            success: function(data) {
               // update our tooltip content with our returned data and cache it
               origin.tooltipster('update', data).data('ajax', 'cached');
            }
         });
      }
   }
});

3. 手动运行/隐藏tooltip

Tooltipster允许使用者完全自由的以自己的喜欢的方式打开或者关闭tooltips，而不需要将trigger设置成"Custom"，即便是"Hover"也是完全可以实现的。看下面的例子：

HTML

<span class="tooltip" id="example" title="My tooltip content">Example</span>

JAVASCRIPT

// first, launch the Tooltipster plugin
$(document).ready(function() {
   $('.tooltip').tooltipster();
});
   
// on window load, show the tooltip
$(window).load(function() {
   $('#example').tooltipster('show');
      
   // once a key is pressed on your keyboard, hide the tooltip
   $(window).keypress(function() {
      $('#example').tooltipster('hide');
   });
});

4. 更新Tooltip的内容

Tooltip的内容更新很容易，不管tooltip的状态是显示还是被隐藏。根据使用者选择的对象，可以同时更新多个对象的tooltip的内容，也可以只更新一个对象的tooltip的内容。

默认情况向，当tooltip的内容被改变是，tooltipster会显示一个动画，具体可参照下载文件中的tooltipster.css文件中的".tooltipster-content-changing"样式表。

看下面一段代码：

$('#my-special-tooltip').tooltipster('update', 'My new content');