tipso显示html,jQuery轻量级响应式Tooltip插件

tipso是一款非常实用的轻量级响应式jQuery Tooltip插件。该Tooltip插件可以和Animate.css配合使用，制作各种Tooltip显示时的动画效果。还可以通过Ajax来动态加载Tooltip的内容。并且提供了大量参数来控制Tooltip的显示和行为。

使用方法

使用该Tooltip插件首先要引入jQuery和tipso.js以及tipso.css文件。

如果你需要使用CSS3的动画效果，请引入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');