Dojo Treeノードにツールチップを追加する最も簡単な方法は？

Question

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にあなたのマウスであれば...

：これは、

2回目の試みでは、TreeのonMouseEnterメソッドを見ましたが、ノードのデータ項目にアクセスできませんでした。 DOMツリーをナビゲートして現在のノードIDを検索し、そのアイテムを店で探して、項目データを取得するための少しのロジックが必要ですか？...

最後に私は「getTooltip（アイテム）」メソッドは、木の上にあります発見し、私はそれを設定する場合：

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「タイトル」ポップアップです...

正しいかどう動的（怠惰な）ツリーノードでdojoのツールチップを達成する（簡単な）方法は？ -robbie

Answer 1

私は前にツリーでの作業の喜びを持っていなかったが、あなたは使用して、新しいツールチップを産卵試してみました：http://dojotoolkit.org/reference-guide/dijit/Tooltip.html

Answer 2

これが最も簡単な方法です！

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); 
    }, 
}); 

Answer 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); 
} 

Answer 4

あなたは、単に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); 
     } 
    }); 

Answer 5

あなたは、単にgetTooltip属性を使用することができます。

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