当用户移动鼠标指针在某个元素上时，出现提示信息窗口用来显示额外信息。提示内容可以包含任何来自页面的或者通过 ajax 生成的 html 元素。
1、用法
（1）、从标记创建提示框（Tooltip），添加 'easyui-tooltip' class 到元素，不需要任何的 javascript 代码。
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
（2）、使用 javascript 创建提示框（Tooltip）。
<a id="dd" href="javascript：void(0)">Click here</a>
$('#dd').tooltip({
position: 'right',
content: '<span style="color:#fff">This is the tooltip message.</span>',
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#666',
borderColor: '#666'
});
}
});
2、属性
|
名称 |
类型 |
描述 |
默认值 |
|
position |
string |
提示框（tooltip）位置。可能的值：'left'、'right'、'top'、'bottom'。 |
bottom |
|
content |
string |
提示框（tooltip）内容。 |
null |
|
trackMouse |
boolean |
如果设置为 true，提示框（tooltip）会随着鼠标移动。 |
false |
|
deltaX |
number |
提示框（tooltip）位置的水平距离。 |
0 |
|
deltaY |
number |
提示框（tooltip）位置的垂直距离。 |
0 |
|
showEvent |
string |
引发提示框（tooltip）出现的事件。 |
mouseenter |
|
hideEvent |
string |
引发提示框（tooltip）消失的事件。 |
mouseleave |
|
showDelay |
number |
显示提示框（tooltip）的时间延迟。 |
200 |
|
hideDelay |
number |
隐藏提示框（tooltip）的时间延迟。 |
100 |
3、事件
|
名称 |
参数 |
描述 |
|
onShow |
e |
当显示提示框（tooltip）时触发。 |
|
onHide |
e |
当隐藏提示框（tooltip）时触发。 |
|
onUpdate |
content |
当提示框（tooltip）内容更新时触发。 |
|
onPosition |
left,top |
当提示框（tooltip）位置改变时触发。 |
|
onDestroy |
none |
当提示框（tooltip）销毁时触发。 |
4、方法
|
名称 |
参数 |
描述 |
|
options |
none |
返回选项（options）属性（property）。 |
|
tip |
none |
返回提示（tip）对象。 |
|
arrow |
none |
返回箭头（arrow）对象。 |
|
show |
e |
显示提示框（tooltip）。 |
|
hide |
e |
隐藏提示框（tooltip）。 |
|
update |
content |
更新提示框（tooltip）内容。 |
|
reposition |
none |
重置提示框（tooltip）位置。 |
|
destroy |
none |
销毁提示框（tooltip）。 |
5、实例
（1）、基础工具提示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Tooltip - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../css/easyui.css"> <link rel="stylesheet" type="text/css" href="../css/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> </head> <body> <h2>Basic Tooltip</h2> <p>Hover the links to display tooltip message.</p> <p style="margin:20px 0;"></p> <p>The tooltip can use each elements title attribute. <a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a> to display tooltip. </p> </body> </html>
<喎?http://www.weiyer.com/Search.asp?KeyWord=/kf/ware/vc/" target="_blank" class="keylink">vcD4KPGgyPqOoMqOpPHN0cm9uZz6hormkvt/AuMzhyr48L3N0cm9uZz48L2gyPgo8cD48cHJlIGNsYXNzPQ=="brush:sql;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip as Toolbar - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Tooltip as Toolbar</h2>
<p>This sample shows how to create a tooltip style toolbar.</p>
<p style="margin:20px 0;"></p>
<p style="padding:10px 80px">
<p><a id="dd" href="javascript：void(0)" class="easyui-tooltip" data-options="
hideEvent: 'none',
content: function(){
return $('#toolbar');
},
onShow: function(){
var t = $(this);
t.tooltip('tip').focus().unbind().bind('blur',function(){
t.tooltip('hide');
});
}
">Hover me</a> to display toolbar.</p>
</p>
<p style="display:none">
<p id="toolbar">
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Add" data-options="iconCls:'icon-add',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Cut" data-options="iconCls:'icon-cut',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Remove" data-options="iconCls:'icon-remove',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Undo" data-options="iconCls:'icon-undo',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Redo" data-options="iconCls:'icon-redo',plain:true"></a>
</p>
</p>
</body>
</html>
（3）、自定义提示样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Tooltip Style - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Custom Tooltip Style</h2>
<p>This sample shows how to change the tooltip style.</p>
<p style="margin:s0px 0;"></p>
<p style="padding:10px 200px">
<p id="pp1" class="easyui-panel" style="width:100px;padding:5px">Hover Me</p>
</p>
<p style="padding:10px 200px">
<p id="pp2" class="easyui-panel" style="width:100px;padding:5px">Hover Me</p>
</p>
<script>
$(function(){
$('#pp1').tooltip({
position: 'right',
content: '<span style="color:#fff">This is the tooltip message.</span>',
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#666',
borderColor: '#666'
});
}
});
$('#pp2').tooltip({
position: 'bottom',
content: '<p style="padding:5px;background:#eee;color:#000">This is the tooltip message.</p>',
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#fff000',
borderColor: '#ff0000',
boxShadow: '1px 1px 3px #292929'
});
},
onPosition: function(){
$(this).tooltip('tip').css('left', $(this).offset().left);
$(this).tooltip('arrow').css('left', 20);
}
});
});
</script>
</body>
</html>
（4）、对话框内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip Dialog - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Tooltip Dialog</h2>
<p>This sample shows how to create a tooltip dialog.</p>
<p style="margin:20px 0;"></p>
<p style="padding:10px 100px">
<p><a id="dd" href="javascript：void(0)">Click here</a> to see the tooltip dialog.
</p>
<script>
$(function(){
$('#dd').tooltip({
content: $('<p></p>'),
showEvent: 'click',
onUpdate: function(content){
content.panel({
width: 200,
border: false,
title: 'Login',
href: '_dialog.html'
});
},
onShow: function(){
var t = $(this);
t.tooltip('tip').unbind().bind('mouseenter', function(){
t.tooltip('show');
}).bind('mouseleave', function(){
t.tooltip('hide');
});
}
});
});
</script>
</body>
</html>
（5）、ajax工具提示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Tooltip - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Ajax Tooltip</h2>
<p>The tooltip content can be loaded via AJAX.</p>
<p style="margin:20px 0;"></p>
<a href="#" class="easyui-tooltip" data-options="
content: $('<p></p>'),
onShow: function(){
$(this).tooltip('arrow').css('left', 20);
$(this).tooltip('tip').css('left', $(this).offset().left);
},
onUpdate: function(cc){
cc.panel({
width: 500,
height: 'auto',
border: false,
href: '_content.html'
});
}
">Hove me</a> to display tooltip content via AJAX.
</body>
</html>
