tipso是一款非常实用的轻量级响应式jQuery Tooltip插件。该Tooltip插件可以和Animate.css配合使用，制作各种Tooltip显示时的动画效果。还可以通过Ajax来动态加载Tooltip的内容。并且提供了大量参数来控制Tooltip的显示和行为。
使用方法
使用该Tooltip插件首先要引入jQuery和tipso.js以及tipso.css文件。
<link rel="stylesheet" href="/path/to/tipso.css"><script src="jquery/1.11.0/jquery.min.js"></script><script src="/path/to/tipso.js"></script> |
如果你需要使用CSS3的动画效果，请引入Animate.css。
<link rel="stylesheet" href="/path/to/animate.css"> |
调用插件
$('.tipso').tipso(); |
配置参数
下面是该Tooltip插件的一些可用的参数。
| 参数 | 默认值 | 描述 |
| speed | 400 | fade效果的持续时间，单位毫秒 |
| background | ‘#55b555’ | tooltip的背景颜色，它可以是hex、rgb、rgba或颜色关键字 |
| color | ‘#ffffff’ | tooltip的前景色，它可以是hex、rgb、rgba或颜色关键字 |
| position | ‘top’ | tooltip的初始化位置，可用的位置有： ‘top’, ‘bottom’, ‘left’, ‘right’ |
| width | 200 | tooltip的宽度，单位像素 |
| delay | 200 | 显示tooltip之前的延时时间，单位毫秒 |
| animationIn | ” | 使用Animate.css的CSS3动画效果显示tooltip |
| animationOut | ” | 使用Animate.css的CSS3动画效果隐藏tooltip |
| offsetX | 0 | tooltip在X轴上的偏移值 |
| offsetY | 0 | tooltip在Y轴上的偏移值 |
| content | null | tooltip的内容，可以是文本、HTML代码或其它内容 |
| ajaxContentUrl | null | Ajax调用tooltip内容的URL地址 |
| useTitle | true | 是否使用默认的title属性作为tooltip的内容 |
| onBeforeShow | function(){} | tooltip显示前的回调函数 |
| onShow | function(){} | tooltip显示之后的回调函数 |
| onHide | function(){} | tooltip隐藏之后的回调函数 |
另外，你可以使用data-tipso属性来替代title属性作为tooltip的内容（要设置useTitle: false）。
方法
下面是该tooltip插件的一些可用方法。
// Show the tipso tooltip$('.tipso').tipso('show');// Hide the tipso tooltip$('.tipso').tipso('hide');// Destroy tipso tooltip$('.tipso').tipso('destroy');// Add a callback before tipso is shown$('.tipso').tipso({ onBeforeShow: function(){ // Your code }});// Add a callback when tipso is shown$('.tipso').tipso({ onShow: function(){ // Your code }});// Add a callback when tipso is hidden$('.tipso').tipso({ onHide: function(){ // Your code }});// Load AJAX content to tipso$('.tipso').tipso({ useTitle: false, ajaxContentUrl : 'ajax.html'});// Update tipso options$('.tipso').tipso('update', 'content', 'new content'); |
