Najprostszy sposób dodania podpowiedzi do węzła drzewa Dojo?

Question

Widziałem wiele sugestii, jak dodać etykietkę narzędziową do węzła drzewa Dojo, a niektóre nie działają, a inne zwracają się do mnie z innymi pytaniami ...

Jednym ze sposobów, w jaki próbowałem z ograniczonym sukcesem jest to:

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

Ale ma dziwne zachowanie tylko tworząc podpowiedź kiedy nadchodzi od węzła wyżej w drzewie, i tylko wtedy, gdy mysz do EXPANDO od górnej krawędzi ...

Po drugiej próbie przyjrzałem się metodzie onMouseEnter drzewa, ale nie ma ona dostępu do elementu danych węzła, więc Musimy przejść przez to, co wydaje się trochę logiczne, aby uzyskać dane pozycji przez ... wyszukiwanie aktualnego identyfikatora węzła poprzez nawigację po drzewie DOM, a następnie szukanie tego produktu w sklepie? ...

Wreszcie I odkrył istnieje „getTooltip (pozycja)” metoda na drzewie, ale kiedy go ustawić:

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

tooltip jest zwykłym html „title” popup ...

Jaka jest prawidłowa (łatwy) sposób na uzyskanie podpowiedzi dojo na dynamicznych (leniwych) drzewiastych węzłach? -robbie

Answer 1

Nie miałem przyjemność pracować z drzewa przed, ale czy próbowałeś tarła nowego Tooltip używając: http://dojotoolkit.org/reference-guide/dijit/Tooltip.html

Answer 2

Jest to najprostszy sposób!

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

można po prostu użyć zdarzenia onMouseOver i wiążą się z tym w Dijit podpowiedzi.

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

Można po prostu użyć atrybutu getTooltip:

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