基于jQuery Tipso插件實現消息提示框的特點是可以定義提示框的顯示位置，以及動態改變提示框的提示內容，應該說是一款相當靈活的jQuery消息提示框插件，分享給大家供大家參考，具體內容如下

實現的代碼：

<div class="dowebok">

 <h2>

  1、默認</h2>

 <div class="inner">

  <span id="tip1" data-tipso="dowebok.com">Tipso</span></div>

</div>

<div class="dowebok">

 <h2>

  2、左邊顯示</h2>

 <div class="inner">

  <span id="tip2" data-tipso="dowebok.com">Tipso</span></div>

</div>

<div class="dowebok">

 <h2>

  3、背景顏色</h2>

 <div class="inner">

  <span id="tip3" data-tipso="dowebok.com">Tipso</span></div>

</div>

<div class="dowebok">

 <h2>

  4、使用title屬性</h2>

 <div class="inner">

  <span id="tip4" title="內容來自 title 屬性">Tipso</span></div>

</div>

<div class="dowebok">

 <h2>

  5、單擊顯示/隱藏</h2>

 <div class="inner">

  <span id="tip5" data-tipso="dowebok">Tipso</span>

  <p>

   <a id="btn5" href="javascript:">顯示</a></p>

 </div>

</div>

<div class="dowebok">

 <h2>

  6、更新內容</h2>

 <div class="inner">

  <span id="tip6" data-tipso="dowebok.com">Tipso</span>

  <p>

   <input type="text"><a id="btn6" href="javascript:">更新</a></p>

 </div>

</div>

<div class="dowebok">

 <h2>

  7、在圖片上使用</h2>

 <div class="inner">

  <img id="tip7" src="images/tipso.png" alt="" data-tipso="dowebok.com">

 </div>

</div>

<div class="dowebok">

 <h2>

  8、回調函數</h2>

 <div class="inner">

  <span id="tip8" data-tipso="dowebok.com">Tipso</span>

  <p>

   狀態：<em id="status"></em></p>

 </div>

</div>

js代碼：

$(function () {

  // 1

  $('#tip1').tipso({

   useTitle: false

  });

  // 2

  $('#tip2').tipso({

   useTitle: false,

   position: 'left'

  });

  // 3

  $('#tip3').tipso({

   useTitle: false,

   background: 'tomato'

  });

  // 4

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

   }

  });

 });

以上就是本文的全部內容，希望對大家的學習有所幫助。