在 Dojo Select 中添加工具提示
Posted
技术标签:
【中文标题】在 Dojo Select 中添加工具提示【英文标题】：Adding a tooltip in a Dojo Select 【发布时间】：2015-01-14 17:36:54 【问题描述】：我想为 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 ("modules/stores") 中设置模块并将别名放在函数 (Stores) 中并使用此代码创建我的选择。
new Select(
id: "cboPriority",
store: new Memory( data: Stores.priority ),
labelType: 'html',
labelAttr: 'label'
, "divPriority").startup();
我尝试在模块中添加 showTooltip 和 hideTooltip 函数，但我仍然收到控制台错误“ReferenceError: showTooltip is not defined”。设置脚本和模块以便显示工具提示的正确方法是什么？
【问题讨论】：
【参考方案1】：您正在尝试通过标签字符串在元素上设置内联 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，但这可能是从你所在的地方到你想去的地方的最短路径。
【讨论】：
最初，我将商店模块中的项目设置为： id: "foo", label: "FOO", tip: "Foo Tooltip" 并尝试使用 @Eric 示例中所示的工具提示，但我无法找出正确的 CSS要使用的选择器。以上是关于在 Dojo Select 中添加工具提示的主要内容，如果未能解决你的问题，请参考以下文章
Dojo 工具提示未显示在 Internet Explorer 中