我想向Dojo Select中的项目添加工具提示。当商店包含在脚本中时，此代码将添加工具提示。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css";
@import "https://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css";
</style>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js" type="text/javascript" data-dojo-config="async: true"></script>
<script>
require(["dijit/form/Select",
"dojo/store/Memory",
"dojo/domReady!"
], function (Select, Memory) {
var store = new Memory({
data: [
{ id: "foo", label: '<div tooltip="Foo Tooltip" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">FOO</div>' },
{ id: "bar", label: '<div tooltip="Bar Tooltip" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">Bar</div>' }
]
});
var s = new Select({
store: store,
labelType: 'html',
labelAttr: 'label'
}, "target");
s.startup();
});
function showTooltip(el) {
dijit.showTooltip(el.getAttribute('tooltip'), el);
}
function hideTooltip(el) {
dijit.hideTooltip(el);
}
</script>
</head>
<body class="claro">
<div id="target"></div>
</body>
</html>
但是，在我的应用程序中，我的商店位于单独的模块（stores.js）中。
define([], function () {
return {
priority: [
{ id: "foo", label: '<div tooltip="Foo Tooltip" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">FOO</div>' },
{ id: "bar", label: '<div tooltip="Bar Tooltip" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">Bar</div>' }
]
};
};
我在require（“模块/商店”）中设置模块，并将别名放入函数（Stores）中，并使用此代码创建我的选择。
new Select({
id: "cboPriority",
store: new Memory({ data: Stores.priority }),
labelType: 'html',
labelAttr: 'label'
}, "divPriority").startup();
我尝试在模块中添加showTooltip和hideTooltip函数，但仍然收到控制台错误“ ReferenceError：showTooltip未定义”。设置脚本和模块的正确方法是什么，以便我可以显示工具提示？
最佳答案
您正在尝试通过标签字符串在元素上设置内联onmouseover事件处理程序。这将尝试调用全局showTooltip函数，并且不存在这样的函数-您的showTooltip函数包含在require工厂函数内。
假设您正在创建一个HTML标签，并且该标签的节点包含一个指示要显示的文本的属性，那么在此特定情况下，更好的选择是使用dojo / on的event delegation来为鼠标悬停连接一个事件处理程序，为鼠标悬停连接另一个事件处理程序：
var dropdownNode = s.dropDown.domNode;
on(dropdownNode, '[data-tooltip]:mouseover', function () {
Tooltip.show(this.getAttribute('data-tooltip'), this);
});
on(dropdownNode, '[data-tooltip]:mouseout', function () {
Tooltip.hide(this);
});
（以上代码中的
Tooltip指的是dijit/Tooltip模块，我选择使用至少是有效HTML5的数据属性。）老实说，我宁愿避免一开始就将HTML嵌入数据中，但这可能是从您所要到达的最短路径。