jQuery消息提示框插件Tipso

今天我们用Tipso插件来演示八种不同提示效果，并且了解下Tipso API。

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

演示一：默认效果

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

演示二：左侧显示

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

演示三：背景颜色

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

演示四：使用title属性

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

演示五：单击显示/隐藏

$('#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();
}
});

演示六：更新内容

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

演示七：在图片上使用

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

演示八：回调函数

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

以上所述就是本文的全部内容了，希望大家能够喜欢。

您可能感兴趣的文章:

• qTip2 精致的基于jQuery提示信息插件
• jQuery带箭头提示框tooltips插件集锦
• 编写自己的jQuery提示框（Tip）插件
• jquery-tips悬浮提示插件分享
• jquery.cvtooltip.js 基于jquery的气泡提示插件
• jQuery插件Tooltipster实现漂亮的工具提示
• 属于你的jQuery提示框（Tip）插件
• 基于jQuery Tipso插件实现消息提示框特效
• poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
• jQuery tip提示插件（实例分享）