I'm in the process of adding a TooltipDialog to a dojox.grid cell.
Since there have been questions about using TooltipDialog without a DropDownButton, I'm posting my work-in-progress code. Thanks to previous posters for ideas&examples. Of course it would be better, if Dijit supported this use case out of the box.
Caveats: The code is a work-in-progress snapshot. Tested in FF2 only against SVN HEAD.
Closing of the popup is not fully implemented yet.
In code below, rvGrid is a dojox grid instance.
rv.popupTest = function(col, row) {
var node = rvGrid.getCell(col).getNode(row);
var tooltip = document.createElement('div');
var id = 'rvPopC' + col + 'R' + row;
rv.removeElement(id); // ensure the id is free, in case there were errors earlier
tooltip.id = id;
node.appendChild(tooltip);
tooltip.innerHTML='<b>Contents of tooltip</b><input type="text" value="" width="8"/>';
var tooltipD = new dijit.TooltipDialog({
title: "tooltip title"
}, tooltip);
tooltipD.startup();
dojo.connect(dijit.byId(id), '_onBlur', dojo.hitch(null, rv.dbg, 'dijit _onBlur ' + id));
dijit.popup.open({
parent: rvGrid,
popup: tooltipD,
around: node,
orient:
{'BL':'TL', 'BR':'TR', 'TL':'BL', 'TR':'BR'},
onExecute: function(){
console.debug('onExecute');
rv.closePopup(tooltipD);
},
onCancel: function(){
console.debug('onCancel')
rv.closePopup(tooltipD);
// self._closeDropDown(true);
},
onClose: function(){
console.debug('onClose')
rv.closePopup(tooltipD);
}
});
}
rv.removeElement = function(id) {
var elem = dojo.byId(id);
if (!elem)
return;
if (!elem.parentNode)
return;
elem.parentNode.removeChild(elem);
}
rv.closePopup = function(id, popupDijit) {
console.debug('closePopup: ' + popupDijit);
dijit.popup.close(popupDijit);
rv.removeElement(id);
}
var node = rvGrid.getCell(col).getNode(row);
var tooltip = document.createElement('div');
var id = 'rvPopC' + col + 'R' + row;
rv.removeElement(id); // ensure the id is free, in case there were errors earlier
tooltip.id = id;
node.appendChild(tooltip);
tooltip.innerHTML='<b>Contents of tooltip</b><input type="text" value="" width="8"/>';
var tooltipD = new dijit.TooltipDialog({
title: "tooltip title"
}, tooltip);
tooltipD.startup();
dojo.connect(dijit.byId(id), '_onBlur', dojo.hitch(null, rv.dbg, 'dijit _onBlur ' + id));
dijit.popup.open({
parent: rvGrid,
popup: tooltipD,
around: node,
orient:
{'BL':'TL', 'BR':'TR', 'TL':'BL', 'TR':'BR'},
onExecute: function(){
console.debug('onExecute');
rv.closePopup(tooltipD);
},
onCancel: function(){
console.debug('onCancel')
rv.closePopup(tooltipD);
// self._closeDropDown(true);
},
onClose: function(){
console.debug('onClose')
rv.closePopup(tooltipD);
}
});
}
rv.removeElement = function(id) {
var elem = dojo.byId(id);
if (!elem)
return;
if (!elem.parentNode)
return;
elem.parentNode.removeChild(elem);
}
rv.closePopup = function(id, popupDijit) {
console.debug('closePopup: ' + popupDijit);
dijit.popup.close(popupDijit);
rv.removeElement(id);
}