我们都知道DOM节点的title属性。Tooptip组件就是比較强大的title，它能够自由的设置自己的样式、位置以及有自己相关的触发事件。

演示样例：

<!DOCTYPE html>

<html>

<head>

<title>jQuery Easy UI</title>

<meta charset="UTF-8" />

<script type="text/javascript" src="easyui/jquery.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

<script>

	$(function () {

	$.fn.tooltip.defaults.position = 'top';	//重写属性的默认值

	$('#box').tooltip({

		//tooltip属性

		content : '<strong>经纬恒润科技</strong>',	//提示框内容,支持html格式

		position : 'right',			//消息框位置,默认bootom,还有left、right、top

		trackMouse : true,			//当为true时。同意提示框尾随鼠标移动，默觉得false

		deltaX : 0,					//水平方向位置调整參数

		deltaY : 0,					//垂直方向位置调整參数

		showEvent : 'mouseenter',	//当激活事件的时候显示提示框,默认mouseenter

		hideEvent : 'mouseleave',	//当激活事件的时候隐藏提示框,默认mouseleave

		showDelay : 500,			//延长多少ms显示提示框 默认200

		hideDelay : 500,			//延长多少ms隐藏提示框 默认200

		//toolpit事件

		onShow : function (e) {

			//alert('显示的时候触发！');

			console.log($('#box').tooltip('tip'));

			console.log($('#box').tooltip('arrow'));

			$('.tooltip-bottom').css('left', 500);

		},

		onHide : function (e) {

			//alert('隐藏的时候触发！

');

			$('#box').tooltip('reposition');

		},

		onUpdate : function (cc) {

			//alert('提示框内容更新的时候触发：' + content);

		},

		onPosition : function (left, top) {

			console.log('left:' + left + ',top:' + top);

		 },

		onDestroy : function (e) {

			alert('提示框被销毁的时候触发！

');

		},

	});

	//tooptip方法：

	$('#box').click(function () {

		$(this).tooltip('update', '<font color="red"  style="font-weight:bold;font-style:italic;" >恒润科技</font>');	//改变提示框内容

		//$(this).tooltip('destroy');	//销毁提示框

	});

	console.log($('#box').tooltip('options').content);

	//$('#box').tooltip('show');	//显示

	//$('#box').tooltip('hide');	//隐藏

});

</script>

</head>

<body style="margin:100px;">

<a href="###"  title="这是title提示框">Hirain</a>

</br></br></br></br></br>

<a href="###" id="box">Hirain</a>

</br></br></br></br></br>

</body>

</html>

网上看到一个比較好的样例：

<!DOCTYPE html>

<html>

<head>

<title>jQuery Easy UI</title>

<meta charset="UTF-8" />

<script type="text/javascript" src="easyui/jquery.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

<script>

	$(function () {

		var data = [

			{A:'name1',B:150,C:135,D:285,E:97},

			{A:'name2',B:59,C:96,D:155,E:167},

			{A:'name3',B:83,C:86,D:169,E:53},

			{A:'name4',B:66,C:61,D:127,E:158}

		];

		$('#dg').datagrid({

			columns:[[

				{field:'A',title:'A',width:100,formatter:formatA},

				{field:'B',title:'B',width:100},

				{field:'C',title:'C',width:100},

				{field:'D',title:'D',width:100}

			]],

			data: data,

			onLoadSuccess:function(){

				createTooltip();

			}

		});

		function formatA(value,row,index){

			return '<span data-p1='+index+' class="easyui-tooltip">' + value + '</span>';

		}

		function createTooltip(){

			$('#dg').datagrid('getPanel').find('.easyui-tooltip').each(function(){

				var index = parseInt($(this).attr('data-p1'));

				$(this).tooltip({

					content: $('<div></div>'),

					onUpdate: function(cc){

						var row = $('#dg').datagrid('getRows')[index];

						var content = '<div>content</div><ul>';

						content += '<li>name: '+row.A+'</li>';

						content += '<li>B: '+row.B+'</li>';

						content += '<li>C: '+row.C+'</li>';

						content += '<li>D: '+row.D+'</li>';

						content += '</ul>';

						cc.panel({

							width:200,

							content:content

						});

					},

					position:'right'

				});

			});

		}

	})

</script>

</head>

<body>

  	<table id="dg" style="width:400px;height:200px"></table>

</body>

</html>

运行效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

点击下载源码

jQuery Easy UI Tooptip(提示框)组件的更多相关文章

  1. 第一百九十六节，jQuery EasyUI，Tooltip(提示框)组件

    jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...

  2. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

  3. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  4. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  5. jQuery Easy UI Draggable(拖动)组件

    上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...

  6. jQuery Easy UI ProgressBar（进度条）组件

    ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

  7. jQuery Easy UI Panel(面板)组件

    panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...

  8. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  9. JQuery Easy Ui （Tree树）详解（转）

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

随机推荐

  1. JAVAWEB开发之HttpServletResponse和HttpServletRequest详解(下)（各种乱码、验证码、重定向和转发）

    HttpServletRequest获取请求头信息  (1)获取客户机请求头 String getHeader(String name) Enumeration<String> getHe ...

  2. LaTeX技巧207：使用align环境输入多行公式的技巧

    align是输入多行公式中最好用的环境,仅仅是个人浅见,因为他的对齐非常灵活,如果大家需要非常灵巧的对齐方式的多行公式,建议使用align环境,对应的也还有align*和aligned等等类似的环境, ...

  3. System.DllNotFoundException:“无法加载 DLL“librfc32.dll”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E)。”

    System.DllNotFoundException:“无法加载 DLL“librfc32.dll”: 找不到指定的模块. (异常来自 HRESULT:0x8007007E).” 1.下载文件lib ...

  4. RV32FD指令集

    Risc-V架构定义了可选的单精度浮点指令(F扩展指令集)和双精度浮点指令(D扩展指令集). Risc-V架构规定:处理器可以选择只实现F扩展指令子集而不支持D扩展指令子集:但是如果支持了D扩展指令子 ...

  5. quantum theory

    the principles of quantum mechanics by p.a.m.dirac.

  6. Poly2Tri介绍[转]

    https://blog.csdn.net/xys206006/article/details/83002326 这是Poly2Tri介绍的翻译博文.原文链接:http://sites-final.u ...

  7. maskrcnn_benchmark代码分析(3)

    数据结构 数据加载 数据后处理

  8. jquery validate的漂亮css样式验证

    自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  9. java log4j日志配置

    1.首先看pom.xml文件,需要以下配置 <dependency> <groupId>log4j</groupId> <artifactId>log4 ...

  10. 使用checkstyle来规范你的项目

    Checkstyle是什么 自从做了程序员,关于格式化的讨论就不曾中断过,到底什么才是正确的,什么才是错误的,到现在也没有完整的定论.但随着时间发展,渐渐衍生出一套规范出来.没有什么绝对的正确和错误, ...