jQuery轻量级响应式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');