第六章：Tooltip（提示框）组件
学习要点：
加载方式属性列表事件列表方法列表
一、加载方式：
1.class加载方式：
<!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 style="margin:100px;">
<a href="###" class="easyui-tooltip" title="这是内容提示框！">Hover Me</a>
</body>
</html>
2.JS调用：
<!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 style="margin:100px;">
<a href="###" id="box">Hover Me</a>
</body>
</html>
$(function(){
$('#box').tooltip({
content:'这是内容提示框！',
});
});
二、属性列表：
Tooltip属性
属性名值说明positionstring消息框位置，默认bootom，还有left、right、topcententstring消息框内容，默认为null，可以包含html标签trackMouseboolean为true时，允许提示框跟随鼠标移动，默认为falsedeltaXnumber水平方向提示框的位置，默认为0；deltaYnumber垂直方向提示框的位置，默认为0；showEventstring当激活事件的时候显示提示框。默认值为mouseenterhideEventstring当激活事件的时候显示提示框。默认值为mouseleaveshowDelaynumber延时多少秒显示提示框。默认值为200hideDelaynumber延时多少秒隐藏提示框。默认值为100
<!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 style="margin:100px;">
<a href="###" id="box">Hover Me</a>
</body>
</html>
$(function(){
$('#box').tooltip({
content:'<strong>这是内容提示框！</strong>',
//position:'top',
//trackMouse:true,
//deltaX:100,
//deltaY:100,
//showEvent:'click',
//hideEvent:'dblclick',
//showDelay:500,
//hideDelay:500,
});
});
三、事件列表：
Tooltip事件
事件名传参说明onShowe在显示提示框的时候触发onHidee在隐藏提示框的时候触发onUpdatecontent在提示框内容更新的时候触发onPositionleft、top在提示框位置改变的时候触发onDestorynone在提示框销毁的时候触发
<!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 style="margin:100px;">
<a href="###" id="box">Hover Me</a>
</body>
</html>
$(function(){
$('#box').tooltip({
content:'<strong>这是内容提示框！</strong>',
//position:'top',
//trackMouse:true,
//deltaX:100,
//deltaY:100,
//showEvent:'click',
//hideEvent:'dblclick',
//showDelay:500,
//hideDelay:500,
onShow:function(e){
alert("显示的时候触发！");
}
onHide:function(e){
alert("隐藏的时候触发！");
}
onUpdate:function(content){
alert('内容改变了为：'+content);
}
onPosition:function(left,top){
console.log('left:'+left+',top:'+top);
}
onDestroy:function(e){
alert('工具栏被销毁了！');
}
});
$('#box').click(function(){
//$(this).tooltip('update','改变了！');
$(this).tooltip('destroy');
});
console.log($('#box').tooltop('options'));
});
四、方法列表：
Tooltip方法：
方法名传参说明optionsnone返回属性对象tipnone返回tip元素对象arrownone返回箭头元素对象showe显示提示框hidee隐藏提示框
<!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 style="margin:100px;">
<a href="###" id="box">Hover Me</a>
</body>
</html>
$(function(){
$.fn.tooltip.defaults.position = 'top';
$('#box').tooltip({
content:'<strong>这是内容提示框！</strong>',
//position:'top',
//trackMouse:true,
//deltaX:100,
//deltaY:100,
//showEvent:'click',
//hideEvent:'dblclick',
//showDelay:500,
//hideDelay:500,
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(content){
// alert('内容改变了为：'+content);
// }
// onPosition:function(left,top){
// console.log('left:'+left+',top:'+top);
// }
// onDestroy:function(e){
// alert('工具栏被销毁了！');
// }
// });
// $('#box').click(function(){
//$(this).tooltip('update','改变了！');
// $(this).tooltip('destroy');
// });
// console.log($('#box').tooltip('options'));
// $('#box').tooltip('show');
// $('#box').tooltip('hide');
});
PS：我们可以使用$.fn.tooltip.defaults重写默认值对象。
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/102837787
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载！
