8个例子演示jQuery消息提示框插件Tipso的用法

发布时间:2020-02-12编辑:脚本学堂
有关jquery消息提示框插件Tipso的用法,在jquery中实现消息提示框,可用的插件很多,这里重点介绍Tooltip提示框插件的几个实例,供大家学习参考。

Tipso插件是什么?

Tipso是一款基于jquery的Tooltip提示框插件,它提供了众多参数,如显示动画持续时间、背景颜色、文本颜色、显示位置、加载ajax内容、回调函数等。

如图:
Tipso插件

以下是Tipso插件的八种不同提示效果,通过这些实例了解下Tipso API。

html部分:
 

<div class="dowebok">
<h2>1、默认</h2>
<div class="inner">
<span id="tip1" data-tipso="dowebok.com">Tipso</span>
</div>
</div>

演示1:默认效果
 

$('#tip1').tipso({
useTitle: false
});

演示2:左侧显示
 

$('#tip2').tipso({
useTitle: false,
position: 'left'
});

演示3:背景颜色
 

$('#tip3').tipso({
useTitle: false,
background: 'tomato'
});

演示4:使用title属性
 

$('#tip4').tipso();

演示5:单击显示/隐藏
 

$('#tip5').tipso({
useTitle: false
});
$('#btn5').on({
click: function(e) {
if ($(this).text() == '显示') {
$(this).text('隐藏');
$('#tip5').tipso('show');
} else {
$(this).text('显示');
$('#tip5').tipso('hide');
}
e.preventDefault();
}
});

演示6:更新内容
 

$('#tip6').tipso({
useTitle: false
});
$('#btn6').on('click', function() {
var $val = $(this).prev().val();
if ($val) {
$('#tip6').tipso('update', 'content', $val);
}
});

演示7:在图片上使用
 

$('#tip7').tipso({
useTitle: false
});

演示8:回调函数
 

$('#tip8').tipso({
useTitle: false,
onBeforeShow: function() {
$('#status').html('beforeShow');
},
onShow: function() {
$('#status').html('show');
},
onHide: function() {
$('#status').html('hide');
}
});