Tipso插件是什么?
Tipso是一款基于jquery的Tooltip提示框插件,它提供了众多参数,如显示动画持续时间、背景颜色、文本颜色、显示位置、加载ajax内容、回调函数等。
如图:
以下是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');
}
});