Tooltip(提示框)组件

最新推荐文章于 2023-06-18 18:40:11 发布

worn.xiao

最新推荐文章于 2023-06-18 18:40:11 发布

阅读量1.6k

点赞数

文章标签： easyui javascript ecmascript

原文链接：https://mp.csdn.net/mp_blog/creation/editor/61417168

版权

<!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>
<script type="text/javascript" src="js/index.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" />
</head>
<body>
	<a href="##" 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';