Easiest way to add tooltip in Dojo tree node?

Question

I saw some suggestions on how to add a tooltip to the Dojo Tree node, and some of them don't seem to work, while others ask me other questions ...

One of the ways I've tried with limited success is this:

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

But it has odd behavior when creating a tooltip when approaching the node above in the tree and only when hovering over the extension from the top edge ...

The second attempt, I looked at the Tree onMouseEnter method, but it does not have access to the node data element, and so I would have to go through what seems a little logical to get the element data ... by looking at the current node id through the DOM tree navigation, and then look for this item in the store? ...

Finally, I found that there is a getTooltip (item) 'method on the tree, but when I installed it:

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

the tooltip is just a regular HTML header title popup ...

What is the correct (simple) way to do Dojo hints on dynamic (lazy) tree nodes? -robbie

Answer 1

This is the easiest way!

 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 2

You can simply use the getTooltip attribute:

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

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

I did not like working with Tree before, but you tried to create a new tooltip using: http://dojotoolkit.org/reference-guide/dijit/Tooltip.html

Answer 5

You can simply use the onMouseOver event and associate the Dijit tooltip with it.

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