Simplest way to add a tooltip to Dojo Tree node?

Question

I have seen a number of suggestions on how to add a tooltip to Dojo Tree node, and some don't seem to work and others have me asking other questions...

One way I have 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 the odd behavior of only creating the tooltip when coming from a node higher up in the tree, and only if you mouse into the expando from the top edge...

A second attempt I looked at the Tree's onMouseEnter method, but it doesn't have access to a node's data item, and so I would have to go through what seems a bit of logic to get the item data by ...looking up the current node id via navigating the DOM tree, then looking for that item in the store?...

Finally I discovered there is a 'getTooltip(item)' method on Tree, but when I set it up:

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 'title' popup...

What is the correct (easy) way to accomplish dojo tooltips 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 could simply use the getTooltip attribute:

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