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

五、高级应用

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');
posted @ 2013-03-21 16:50  zhuhc  阅读(2878)  评论(1)    收藏  举报