javascript - Add dojo tooltip dialog to each table cell

Question

I'm tyring to add a dojo tooltip dialog to every table cell so that when i hover over each cell the content. I'm using the tooltip dialog because there is clickable content on it.

I know this is possible using the tooltip control as below

require(["dijit/Tooltip", "dojo/query!css2", "dojo/domReady!"], function(Tooltip){
new Tooltip({
    connectId: "myTable",
    selector: "tr",
    getContent: function(matchedNode){
        return matchedNode.getAttribute("tooltipText");
    }
});
});

I can't find anyway to do similar with the tooltip dialog, any suggestions?

Answer 1

dijit/TooltipDialog looks like a Tooltip, but it's really a dressed-up dialog. You'll need to use dijit/popup manually to do what you want. Fortunately, there's a great example of this in the documentation.

I've made a fiddle that takes that demo and tweaks it to your situation with a table. Making a different tooltip per cell shouldn't be too far of a leap from here, if that's your desire. You could use dojo/query to get all the cells and attach a new TooltipDialog to each one, for instance.

The relevant parts of that code follow.

Open the dialog when hovering:

on(dom.byId('table1'), 'mouseover', function(){
    popup.open({
        popup: myTooltipDialog,
        around: dom.byId('table1')
    });
});

Close the dialog when leaving:

var myTooltipDialog = new TooltipDialog({
    // ...
    onMouseLeave: function(){
        popup.close(myTooltipDialog);
    }
});