一、简介
A powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS.
一款强大的、灵活的JQuery插件，您可以通过使用强大的CSS轻松地创建各种Tooltip。
二、使用
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');