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

}

easyui for jquery之tooltip的更多相关文章

  1. JQuery easyui （4）Tooltip （提示组件） 组件

    ps:先来一波美图 Tooltip的加载方式: 1,class加载 <a href="#" title="tooltip">hello word&l ...

  2. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  3. easyui中jquery重复引用问题（tab内存泄露问题）

    今天认真测试了下easyui的一些兼容性问题,发现在ie9 ie10 首次加载的时候,会出现如下bug.如图所示: 认真看了下,我估计是脚本重复引用的问题,我用的iframe框架的模式.登陆系统后,桌 ...

  4. Easyui 修改jquery validatebox为英文校验提示为中文提示

    修改jquery validatebox为英文校验提示为中文提示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述: 如图,想把校验提示由英文改成中文 ...

  5. 解决 Jquery UI Tooltip 用在Select 的BUG

    今天遇到一个奇葩问题, 在chrome下一切正常的 页面,在IE 下Select无法选中! 是的  ,就是无法选中!!! 效果就是这样的.http://jsfiddle.net/slolife/dp4 ...

  6. 基于jQuery的Tooltip

    近来,要开发一个关务管理系统,为了增加系统美观度,自己开发了一个基于jQuery框的的小插件,与大家分享一下,希望大家能给我提出宝贵修改意见. 下面开发说明使用方法和内容: 一.引用jQuery框架, ...

  7. Jquery Easyui与Jquery Bootstrap的比较

    1.easyui是js框架 :bootstrap 是css框架 ,bootstrap = 样式库 + 一堆jQuery插件,顺便解释一句,如果你只需要bootstrap的样式,你完全不用引入jQuer ...

  8. Jquery Easyui与Jquery Bootstrap(Metronic Bootstrap)的简单比较

    1,通常来看WEB前端用 bootstrap 比较好,后台用EASYUI比较好.Easyui适合工厂企业的管理系统如ERP,CRM之类的,Bootstrap适用于多屏跨设备浏览. 简言之,一个适合上班 ...

  9. easyUI tree jQuery

    Tree 数据转换 所有节点都包含以下属性: id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data text: 显示的节点文本 ...

随机推荐

  1. jt获取鼠标指针的位置

    屏幕 screenX和screenY属性表示鼠标在整个显示屏的位置,从屏幕(而不是浏览器)的左上角开始计算的. 页面 pageX和pageY属性表示鼠标指针在这个页面的位置.页面的顶部可能在可见区域之 ...

  2. free pascal 修改字符集，会导致 dos 不能显示 汉字。 处理方法如下

    http://www.cnblogs.com/yjken/p/3917932.html 让windows系统的DOS窗口也可以显示utf8字符集   C:\Users\Administrator> ...

  3. 自动化测试中，元素无法点击定位等问题的解决：js的使用方法

    在自动化测试中经常会遇到使用selenium方法定位元素点击操作失败的情况,例如,我们想实现在浏览器输入http://www.baidu.com,进入百度首页后,鼠标悬停在“更多产品”上,点击“全部产 ...

  4. ElasticSearch 基础 1

    ElasticSearch 基础=============================== 索引创建 ========================== 1. RESTFUL APIAPI 基本 ...

  5. [Git] 006 在本地新建一个仓库

    1. 方法一 1.1 思路 在 GitHub 上新建一个仓库 clone 到本地 1.2 行动 1.2.1 在 GitHub 上选好自己已有的仓库 点击 "Clone or download ...

  6. Flash存储模块调试

    Flash存储模块 Flash存储模块之前SPI一直读deviceID有问题原因如下: 用正点原子的例程是可以的,但是转移到自己的工程项目里就不行!!原因是正点原子没有在SPI初始化里     RCC ...

  7. 扩展欧几里得算法详解(exgcd)

    一.前言 本博客适合已经学会欧几里得算法的人食用~~~ 二.扩展欧几里得算法 为了更好的理解扩展欧几里得算法,首先你要知道一个叫做贝祖定理的玄学定理: 即如果a.b是整数,那么一定存在整数x.y使得$ ...

  8. -webkit-overflow-scrolling:touch介绍和碰到的坑

    1.作用 可控制元素在移动设备有滚动回弹效果,可惯性滚动 2.适应场景 在ios移动端上,设置容器overflow-y:scroll;使容器内元素滚动时,滑动会很卡顿,使用-webkit-overfl ...

  9. ssh传文件

    #coding=utf-8 import paramiko transport = paramiko.Transport(('192.168.70.129',22)) transport.connec ...

  10. Git：将本地项目连接到远程（github、gitee、gitlab）仓库流程

    当进行协同开发或者为了代码安全备份需要,一般都会将本地代码和远程仓库相连接. 备注:Github.Gitee.Gitlab是三个常用的远程git仓库,操作流程基本一致. 提前环境要求: 1.node. ...