<!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. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_02 泛型_6_泛型通配符

    泛型通配符是一个问号 也是代表不确定的意思 换成Object两个都报错了. 泛型是没有继承概念的,所以上面写Object就会报错.这里应问号 可以代表位置类型 it.next会自动用Object接收 ...

  2. linux查找所有文件中某个字符串

    查找目录下的所有文件中是否含有某个字符串 find .|xargs grep -ri "IBM" 查找目录下的所有文件中是否含有某个字符串,并且只打印出文件名 find .|xar ...

  3. 2019_Chrome和ChromeDriver对应关系

    Chrome和ChromeDriver对应关系 ChromeDriver下载地址:http://chromedriver.storage.googleapis.com/index.html Chrom ...

  4. lvs三种负载均衡模式

    lvs模式 lvs nat模式 地址转换 nat模式 地址转发 ,数据全部集中在lvs处理,lvs压力大 lvs ip-tun模式 ip隧道 与nat模式差不多,差别有了隧道封装,轮询调度给后端服务器 ...

  5. js获取指定字符后面的字符

    function getCaption(obj){ var index=obj.lastIndexOf("\-"); obj=obj.substring(index+1,obj.l ...

  6. [Luogu 4688] [Ynoi2016]掉进兔子洞 (莫队+bitset)

    [Luogu 4688] [Ynoi2016]掉进兔子洞 (莫队+bitset) 题面 一个长为 n 的序列 a.有 m 个询问,每次询问三个区间,把三个区间中同时出现的数一个一个删掉,问最后三个区间 ...

  7. Asp.net中GridView使用详解(很全,很经典)

    http://blog.csdn.net/hello_world_wusu/article/details/4052844 Asp.net中GridView使用详解 效果图参考:http://hi.b ...

  8. Java Web项目使用图形验证码 — Kaptcha

    一.验证码介绍 生成的主要方式: 1.使用Java原生的方式,其中包含了Servlet.AWT.ImageIO的使用: 2.使用开源库,例如Jcaptcha.Kaptcha...: (各图形验证码开源 ...

  9. Java解析XML介绍

    开发十年,就只剩下这套架构体系了! >>>   XML解析器提供了访问或修改用来表示数据的xml文件的能力.Java中提供了多种方式来解析xml文件. 主要分为两类,包括解析XML文 ...

  10. Gos: Armed Golang 💪

    Gos: Armed Golang