今天要分享的这款jQuery消息提示框插件名叫Tipso，它的特点是可以定义提示框的显示位置，以及动态改变提示框的提示内容，应该说是一款相当灵活的jQuery消息提示框插件。效果图如下：

   

实现的代码：

     
        
      
            1、默认
        
      
            
       Tipso
      
    
     
    
     
        
      
            2、左边显示
        
      
            
       Tipso
      
    
     
    
     
        
      
            3、背景颜色
        
      
            
       Tipso
      
    
     
    
     
        
      
            4、使用title属性
        
      
            
       Tipso
      
    
     
    
     
        
      
            5、单击显示/隐藏
        
      
            
       Tipso            
       
                显示
        
      
    
     
    
     
        
      
            6、更新内容
        
      
            
       Tipso            
       
                更新
        
      
    
     
    
     
        
      
            7、在图片上使用
        
      
            
               
      
    
     
    
     
        
      
            8、回调函数
        
      
            
       Tipso            
       
                状态：
        
      
    
     

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');                }            });        });

via：