首页 > 代码库 > Tooltip(提示框)组件

Tooltip(提示框)组件

2024-10-05 00:25:39   220人阅读

    <!DOCTYPE html>  
    <html>  
    <head>  
    <title>jQuery Easy UI</title>  
    <meta charset="UTF-8" />  
    <script type="text/javascript" src=http://www.mamicode.com/"easyui/jquery.min.js"></script>  
    <script type="text/javascript" src=http://www.mamicode.com/"easyui/jquery.easyui.min.js"></script>  
    <script type="text/javascript" src=http://www.mamicode.com/"easyui/locale/easyui-lang-zh_CN.js" ></script>  
    <script type="text/javascript" src=http://www.mamicode.com/"js/index.js"></script>  
    <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"easyui/themes/default/easyui.css" />  
    <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"easyui/themes/icon.css" />  
    </head>  
    <body>  
        <a href=http://www.mamicode.com/"##" id="box">toolTip</a>  
    </body>  
    </html>  
    $(function () {  
        $(‘#box‘).tooltip({  
            content : ‘fghjkl‘,//提示的内容  
            position:‘top‘ //消息框的位置left top bottom  
            trackMouse:true //允许提示框跟着鼠标移动  
            deltaX:0 //水平方向提示框位置  
            deldaY:0 //竖直方向提示框位置  
            showEvent:‘click‘//当激活事件的时候显示提示框  
            hideEvent:‘dbclick‘//当激活事件的时候隐藏提示框  
            showDelay:500,//延迟多长时间显示  
            hideDelay:500,//延迟多长事件隐藏  
              
            onShow: function(e){}//显示的时候触发  
            onHide:function(e){}//隐藏的时候触发  
            onUpdate:function(e){}//内容更新的时候触发  
            onPosition:function(left,top){}//改变位置的时候触发  
            onDestroy:function(none){}//被销毁的时候触发  
    });  
      
    //返回属性对象  
    console.log($(‘#box‘).tooltip(‘options‘));  
      
    //显示提示框  
    $(‘#box‘).tooltip(‘show‘);  
      
    //隐藏提示框  
    $(‘#box‘).tooltip(‘hide‘);  
      
    //更新content 内容  
    $(‘#box‘).tooltip(‘update‘, ‘更新提示内容‘);  
      
    //返回tip 元素对象  
    onShow : function () {  
            console.log($(‘#box‘).tooltip(‘tip‘));  
    },  
      
    //返回箭头元素对象  
    onShow : function () {  
        console.log($(‘#box‘).tooltip(‘arrow‘));  
    },  
      
    //销毁提示框  
    $(‘#box‘).tooltip(‘destroy‘);  
      
    //重置工具栏位置  
    onShow : function (e) {  
        $(‘.tooltip-right‘).css(‘left‘, 500);  
    },  
      
    onHide : function (e) {  
        $(‘#box‘).tooltip(‘reposition‘);  
    },  
      
    $.fn.tooltip.defaults.position = ‘top‘;

 

Tooltip(提示框)组件


联系
我们