tipso支持html,jQuery Tipso消息提示框代码

特效描述：jQuery Tipso消息提示框。jQuery Tipso消息提示框代码

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

jQuery消息提示框插件Tipso演示

1、默认

Tipso

2、左边显示

Tipso

3、背景颜色

Tipso

4、使用title属性

Tipso

5、单击显示/隐藏

Tipso

显示

6、更新内容

Tipso

更新

7、在图片上使用

8、回调函数

Tipso

状态：

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

}

});

});