Cách đơn giản nhất để thêm chú giải công cụ vào nút Dojo Tree?

Question

Tôi đã thấy một số gợi ý về cách thêm chú giải công cụ vào nút Dojo Tree, và một số dường như không hoạt động và những người khác có tôi đặt câu hỏi khác ...

Một cách tôi đã thử với thành công hạn chế là thế này:

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

Nhưng nó có những hành vi kỳ lạ của chỉ tạo tooltip khi đến từ một nút cao hơn trong cây, và chỉ khi bạn di chuyển chuột vào expando cách mép đỉnh ...

Một lần thử thứ hai tôi đã xem xét phương thức onMouseEnter của Tree, nhưng nó không có quyền truy cập vào mục dữ liệu của một nút và vì vậy tôi sẽ ld phải đi qua những gì có vẻ một chút logic để có được các dữ liệu mục bằng cách ... tìm kiếm id nút hiện tại thông qua điều hướng cây DOM, sau đó tìm kiếm mục đó trong cửa hàng? ...

Cuối cùng tôi phát hiện có một phương pháp 'getTooltip (item)' trên cây, nhưng khi tôi đặt nó lên:

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

các tooltip chỉ là một HTML thông thường 'tiêu đề' popup ...

là gì đúng (dễ) cách nào để thực hiện các chú giải công cụ dojo trên các nút cây động (lười)? -robbie

Answer 1

tôi đã không có niềm vui khi làm việc với Tree trước đó, nhưng bạn đã thử sinh sản một Tooltip mới sử dụng: http://dojotoolkit.org/reference-guide/dijit/Tooltip.html

Answer 2

Đây là cách đơn giản nhất!

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

Bạn chỉ có thể sử dụng các sự kiện onMouseOver và ràng buộc với một Dijit Tooltip.

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

Bạn chỉ có thể sử dụng thuộc tính getTooltip:

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