Display dijit toolTip with Dojo DataGrid and JSonRestStore

Question

Is there a more efficient way for displaying a tool tip once a cell is hovered? Using the structure attribute to format the datagrid, is there a way to use formatter to display a dijit toolTip rather than using the html title attribute.

Here is the column in which the toolTip is displaying.

    var subscriberGridLayout = [        
       {    
            name: " ",
            field: "ExpirationDate",
            formatter: function(value){
                if(value){
                    expDate = formatDateIE(value);
                    return toolTip();
                }
                else
                    return " ";
            },
            styles: "text-align: center;",
            width: "30px"
        },

Here is the function that displays a tooltip icon through the image tag but instead of a dijit toolTip it simply uses html's title to display a popup.

    function toolTip(){
        src = "'/Subscriber/resources/images/icons/icon_error.gif'/>";
        if(dojo.date.difference(today, expDate) <= 0 ){
            message = "Credential expired.";
            return "<img title='"+ message + "' src=" + src + "";
        } else if(dojo.date.difference(today, expDate) <= 60) {
            message = "This Subscriber will expire in " + dojo.date.difference(today, expDate) + " days."
                        + "&#10; &#10;To prevent an interruption in the Subscriber&rsquo;s access, please sumbit a request to " + 
                            "renew the Subscriber within 30 days of the expiration date.";
            return "<img title='"+ message + "' src=" + src + "";
        } else {
            return " ";
        }

    }

score 4 · Answer 1 · answered May 02 '13 at 21:47

I would do something like:

new Tooltip({
    connectId: grid.domNode,
    selector: "td",
    getContent: function(matchedNode){
        return matchedNode.innerText
    }
});

With grid.domNode you can get the generated DOM of your widget. A grid generates a table-structure, so you can get the cells by using the selector and getContent properties.

I must say it's not really the correct way to do it because now you're playing with the internal structure of the Dojo widget. If they once decide not to use a table as DOM structure your code won't work.

But I don't think there is a better way to achieve this, in the end you will always have to translate the Dojo cell to a DOM node (because tooltips are DOM based). You can of course connect a tooltip to each cell, but I tried that before and it was a little buggy (sometimes the tooltip didn't pop up).

I also made a JSFiddle to show you a working example.

Display dijit toolTip with Dojo DataGrid and JSonRestStore

1 Answers1