jQuery消息提示框插件Tipso_jquery

今天我们用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');
  }
});

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery
， 消息提示框
Tipso
jquery tips 插件、jquery tooltips 插件、jquery.tips.js插件、jquery tips 插件下载、jquery消息提示框插件，以便于您获取更多的相关知识。