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');