easyui for jquery之tooltip

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax Tooltip - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Ajax Tooltip</h2>
    <p>The tooltip content can be loaded via AJAX.</p>
    <div style="margin:20px 0;"></div>
    
    <a href="#" data-tip="This is the tooltip message1." class="easyui-tooltip" data-options="
            content: function(){
                //return $('<div style=\'padding:5px;background:#eee;color:#000\'>This is the tooltip message.</div>');
                //return $('#toolbar');
                //return $(this).data('tip').;
                return $('<div style=\'padding:5px;background:#eee;color:#000\'></div>').html($(this).data('tip'));
            },
            showEvent: 'mouseenter',
            position: 'bottom',
            onShow: function(){
                var t = $(this);
                t.tooltip('tip').unbind().bind('mouseenter', function(){
                    t.tooltip('show');
                }).bind('mouseleave', function(){
                    t.tooltip('hide');
                });
            }
        ">Hove me</a> to display tooltip content via AJAX.
        
    <div style="display:none">
        <div id="toolbar" style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>
    </div>    
</body>
</html>

清洁的代码整理如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tooltip - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type="text/javascript">
        //tip样式、显示\隐藏触发设置
        function show(){
            var t = $(this);
            //tip样式设置小驼峰规则，marginLeft等同margin-left
            t.tooltip('tip').css({
                backgroundColor: '#fff000',
                borderColor: '#ff0000',
                boxShadow: '1px 1px 3px #292929',
                marginLeft: '20px'
            });
            //tip显示\隐藏触发设置
            t.tooltip('tip').unbind().bind('mouseenter', function(){
                t.tooltip('show');
            }).bind('mouseleave', function(){
                t.tooltip('hide');
            });
        }
        
        //tip内容填充
        function content(){
            return $('<div></div>').append($(this).data('tip'));
        }
    </script>
    <style type="text/css">
        a {
            line-height:80px;
        }
        
        #container{
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <!--data-tip设置tip显示内容设置-->
        <!--data-options中position: 'bottom'设置tip显示相对位置底部[bottom|top|left|right]-->
        <!--data-options中showEvent: 'mouseenter'设置tip显示出发事件[mouseenter|click|none]-->
        <a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
        <a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
        <a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
        <a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
        <a href="#" data-tip="This is the tooltip message." class="easyui-tooltip" data-options="content: content, showEvent: 'mouseenter', position: 'bottom', onShow: show">Hove me</a> to display tooltip content.<br />
    </div>
</body>
</html>

再次优化后

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tooltip - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../tooltip.common.js"></script>
    <style type="text/css">
        a {
            line-height:80px;
        }
        
        #container {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <!--data-tip设置tip显示内容-->
        <!--data-options中position: 'bottom'设置tip显示相对位置底部[bottom|top|left|right]-->
        <!--data-options中showEvent: 'mouseenter'设置tip显示出发事件[mouseenter|click|none]-->
        <a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message.This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
        <a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
        <a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
        <a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
        <a href="#" data-tipcss=" backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929',marginLeft: '20px',width: '300px' " data-tipcontent="This is the tooltip message." class="easyui-tooltip" data-options="content: tooltipcontent, showEvent: 'mouseenter', position: 'bottom', onShow: tooltipshow">Hove me</a> to display tooltip content.<br />
    </div>
</body>
</html>

tooltip.common.js

//tip样式、显示\隐藏触发设置
function tooltipshow(){
    var t = $(this);
    //tip样式设置小驼峰规则，marginLeft等同margin-left
    t.tooltip('tip').css(eval("({" + $(this).data('tipcss') + "})"));
    //tip显示\隐藏触发设置
    t.tooltip('tip').unbind().bind('mouseenter', function(){
        t.tooltip('show');
    }).bind('mouseleave', function(){
        t.tooltip('hide');
    });
}

//tip内容填充
function tooltipcontent(){
    return $('<div></div>').append($(this).data('tipcontent'));
}

来源：https://www.cnblogs.com/hnhycnlc888/p/11173084.html

标签

tip

data-options

position

jquery

css

css样式