在 Dojo Select 中添加工具提示

Adding a tooltip in a Dojo Select

本文关键字：添加 工具提示 Select Dojo      更新时间：2023-09-26

我想在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（"模块/存储"）中设置模块并将别名放入函数（存储）中，并使用此代码创建我的选择。

new Select({
    id: "cboPriority",
    store: new Memory({ data: Stores.priority }),
    labelType: 'html',
    labelAttr: 'label'
}, "divPriority").startup();

我尝试在模块中添加 showTooltip 和 hideTooltip 函数，但我仍然收到控制台错误"引用错误：未定义 showTooltip"。设置脚本和模块以便显示工具提示的正确方法是什么？

您正在尝试通过标签字符串在元素上设置内联onmouseover事件处理程序。 这将尝试调用全局showTooltip函数，并且不存在这样的函数 - 您的showTooltip函数包含在所需的工厂函数中。

假设您正在创建一个 HTML 标签，其节点包含指示要显示的文本的属性，在这种特定情况下，更好的选择是使用 dojo/on 的事件委托来挂接一个用于鼠标悬停的事件处理程序和另一个用于鼠标输出的事件处理程序：

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，但这可能是从您所在的位置到您想要到达的位置的最短路径。

相关文章：