jQuery轻量级响应式Tooltip插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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