jQuery轻量级响应式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动画效果显示tooltipanimationOut '' 使用Animate.css的CSS3动画效果隐藏tooltipoffsetX 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');

在线演示        积分下载        6毛下载        砍两刀下载