向 Dojo Tree 节点添加工具提示的最简单方法？

Posted 2023-02-16

【中文标题】向 Dojo Tree 节点添加工具提示的最简单方法？

【英文标题】：Simplest way to add a tooltip to Dojo Tree node?

【发布时间】：2011-06-21 03:16:59

【问题描述】：

我看到了许多关于如何向 Dojo Tree 节点添加工具提示的建议，有些似乎不起作用，而另一些则让我问其他问题...

我尝试过的一种成功的方法是这样的：

var myTree = new dijit.Tree(
                model: treeModel,
                id: "myTree",
                showRoot: false,
                persist: false,
                onClick: function(item)                                                
                    console.log(item.name);
                ,
                _onNodeMouseEnter : function(node, evt)
                    var tip = new dijit.Tooltip(
                        label: node.item.name,                      
                        connectId: [node.domNode.id]
                    );
                                                                           
                );

但它有一个奇怪的行为，即仅当来自树中较高的节点时才创建工具提示，并且只有当您从顶部边缘将鼠标移入 expando...

第二次尝试我查看了 Tree 的 onMouseEnter 方法，但它无法访问节点的数据项，因此我必须通过看起来有点逻辑的方法来获取项数据...通过导航 DOM 树查找当前节点 ID，然后在商店中查找该项目？...

最后我发现 Tree 上有一个 'getTooltip(item)' 方法，但是当我设置它时：

var myTree = new dijit.Tree(
                model: treeModel,
                id: "myTree",
                showRoot: false,
                persist: false,
                onClick: function(item)                                                
                    console.log(item.Obi_Id);
                ,
                getTooltip: function(item)
                    return item.Secondary_Names;
                
            );

工具提示只是一个常规的 html 'title' 弹出窗口......

在动态（惰性）树节点上完成 dojo 工具提示的正确（简单）方法是什么？ -罗比

【参考方案1】：

这是最简单的方法！

var myTree = new dijit.Tree(
    model: treeModel,
    id: "myTree",
    showRoot: false,
    persist: false,
    onClick: function(item)                                                
       console.log(item.name);
    ,
    _onNodeMouseEnter: function (node,evt) 
       dijit.showTooltip(node.item.name,node.domNode)
    ,
    _onNodeMouseLeave: function (node,evt) 
       dijit.hideTooltip(node.domNode);
    ,
);

【参考方案2】：

您可以简单地使用getTooltip 属性：

new Tree
( 
    model: model, 
    getTooltip: function(item)  return "A tooltip!"; 
);

【参考方案3】：

define(["dojo/aspect","dijit/Tree","dijit/Tooltip"] ,function(aspect,dijit_Tree,dijit_Tooltip) 
    var tree=new dijit_Tree(....);

    //dijit.showTooltip dijit.hideTooltip defined in Tooltip.js

    //copied from dndContainer.js:
    // aspect.after(this.tree, "_onNodeMouseEnter", lang.hitch(this, "onMouseOver"), true)

    var ttf_on=function(node,evt)dijit.showTooltip("Rev="+node.item.latestRevision,node.domNode);

    var ttf_off=function(node,evt)dijit.hideTooltip(node.domNode);;

    aspect.after(tree,"_onNodeMouseEnter",ttf_on,true);
    aspect.after(tree,"_onNodeMouseLeave",ttf_off,true);

【参考方案4】：

我以前没有与 Tree 合作过的乐趣，但您是否尝试过使用：http://dojotoolkit.org/reference-guide/dijit/Tooltip.html 生成新的工具提示

【讨论】：

是的，我在上面的第一次尝试将这种技术与 _onNodeMouseEnter 事件一起使用，但是鼠标只是间歇性地显示工具提示时出现了奇怪的行为。

【参考方案5】：

您可以简单地使用 onMouseOver 事件并将 Dijit 工具提示绑定到该事件。

    new Tree( 
        model: model, 
        onMouseOut: function(e) 
            var node = dijit.getEnclosingWidget(e.target);
            Tooltip.hide(node.labelNode); 
        ,
        onMouseOver: function(e) 
            var node = dijit.getEnclosingWidget(e.target);
            Tooltip.show("A tooltip!", node.labelNode);
        
    );