今天我們用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'); }});以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
