基于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');

   }

  });

 });

以上就是本文的全部内容，希望对大家的学习有所帮助。