Fancy Dojo Widget: A Simple Image with Lazy-Loading Tooltip Content

Today i needed an image displaying some data from a webservice. Only catch is, the data should only be loaded, when the tip is displayed - so i had to code my own custom widget for Dojo 1.6 (.1).

Here it is for you to use it in your projects, if you like:

Code:

        dojo.provide("dijit.ImageTooltipWidget"); 
        dojo.require("dijit._Widget"); 
        dojo.require("dijit._Templated"); 
        dojo.declare("dijit.ImageTooltipWidget",
            [dijit._Widget,dijit._Templated],{ 
                id: "someId", 
                src: 'info.jpg', 
                templateString: '<div id="${id}"><img src="${src}" data-dojo-attach-point="imgNode"/></div>', 
                tooltip: null, 
                defaultLabel: "Lade...", 
                showDelay: 250, 
                getData: null, 
                onTooltipFocus: null, 
                postCreate: function(){ 
                        dojo.require('dijit.Tooltip'); 
                        var tooltip = new dijit.Tooltip({ 
                                connectId: this.domNode, 
                                label: this.defaultLabel, 
                                showDelay: this.showDelay 
                        }); 
                        tooltip._destroyOnRemove =true; 
                        tooltip.startup(); 
                        if(this.onTooltipFocus) 
                                dojo.connect(this.imgNode,
                                  "mouseover",this,"onTooltipFocus"); 
                        else if(this.getData){ 
                                this.onTooltipFocus = function (){ 
                                        tooltip.set("label",this.getData()); 
                                } 
                                dojo.connect(this.imgNode,
                                  "mouseover",this,"onTooltipFocus"); 
                        } 
                        this.tooltip = tooltip; 
                    this.inherited(arguments); 
                }, 
                constructor:function(args){ 
                        this.inherited(arguments); 
                        //do some other stuff 
                } 
        }); 

Useage:

new dijit.ImageTooltipWidget({src: "anImage.jpg", id:"toolTipImage", "getData": someFunctionThatReturnsData});

where the someFunctionThatReturnsData could be something like:

function someFunctionThatReturnsData (){

     return "<div> Data from 'service'... </div>";

}

or you can create your own onToolTipFocus as a function hook.