1、dijit/Tooltip
提示条（Tooltip）是为页面上的空间提供辅助信息的常用手段，其样式定义在单独的样式文件中，开发人员可以自己修改。同时也提供了一些强大的功能，比如可以显示图片、图表和从服务器请求得到的数据等，可以控制显示的时间和出现持续的时间。
dijit/Tooltip 的属性
| 属性 | 属性类别 | 描述 |
| connectId | String | 要挂载 Tooltip 的控件的 Id，可以为用逗号分隔的多个 Id |
| label | String | 要显示的提示信息 |
| showDelay | Integer 400 |
Tooltip 显示之前等待的时间，毫秒级 |
| position |
String[] |
显示提示条的位置，字符串数组，可取值before，after，above，below |
--声明方式样例：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: Tooltip</title> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script> <script> require(["dojo/parser", "dijit/Tooltip", "dijit/form/Button"]); </script> </head> <body class="claro"> <button id="button1" data-dojo-type="dijit/form/Button">Tooltip above</button> <button id="button2" data-dojo-type="dijit/form/Button">Tooltip below</button> <div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:‘button1‘,position:[‘above‘]"> 在按钮上方显示提示信息 </div> <div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:‘button2‘,position:[‘below‘]"> 在按钮下方显示提示信息 </div> </body> </html>
--编程方式样例：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Tooltip</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dijit/Tooltip", "dojo/domReady!"], function(Tooltip){
new Tooltip({
connectId: ["exampleNode"],
label: "提示条显示内容",
position:["above","below"]
});
});
</script>
</head>
<body class="claro">
<span id="exampleNode">测试提示条</span>
</body>
</html>
--使用selector和getContent()绑定多个节点：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Tooltip</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dijit/Tooltip", "dojo/query!css2", "dojo/domReady!"], function(Tooltip){
new Tooltip({
connectId: "myTable",
selector: "tr",
getContent: function(matchedNode){
return matchedNode.getAttribute("tooltipText");
}
});
});
</script>
</head>
<body class="claro">
<table id="myTable">
<tr tooltipText="tooltip for row 1"><td>row 1</td></tr>
<tr tooltipText="tooltip for row 2"><td>row 2</td></tr>
<tr tooltipText="tooltip for row 3"><td>row 3</td></tr>
</table>
</body>
</html>
时间： 2024-11-05 14:47:09