[Dojo-interest] Tooltip on data grid headers and cells?

[Jiho]

I am using an HtmlSource if that makes any difference.

Previously, I just used title attribute on th/td in my tables so that the
browser will take care of showing the tooltip, in case the cell is clipping
the content.

I guess I could write a javascript to apply the title attribute to the grid
once it's built.
But aside from that how do I apply an attribute and also styles to cells to
the grid?

[Rouben Meschian]

To see how you can add a dijit tooltip to cells in grid take a look at
test_grid_tooltip_menu.html

If you want to style the grid, you need to modify the theme. If you want to
format the content of individual cells at runtime, try overriding the
formatters (see test_grid_formatters.html). You can return html from your
format function which is inserted as the inner html of the cell. So you
could theoretically return something like this:
"<div title='hello world'>hello</div>"; Which would print hello and put a
tooltip that says 'hello world' on it.

Hope this helps,
-r

-----
http://roubenmeschian.com/rubo/ Rouben Meschian

[Jiho]

Rouben,

I've tried the formatter but that slows down the rendering. It's definitely
doable but seems like an overkill for something simple as adding a title
attribute.

Does the datagrid or wijits in general, have a supported way of adding a
custom attribute or a css style?

[Jiho]

Post by Rouben Meschian
To see how you can add a dijit tooltip to cells in grid take a look at
test_grid_tooltip_menu.html

Where might this test_grid_tooltip_menu.html page be?

[Jiho]

I found where test_grid_tooltip_menu.html is by the way :)
It was in the massive source distribution.

Anyway, I kind of found a way to do what I originally intended to do, which
is to add a title attribute to each cell, header and data, so that the
browser can do its simple tooltip.

I say, kind of because it only works for header cells but not for data
cells. And the reason for that is perhaps due to a bug or an intentional
design.

When I create the layout for the grid, I do:

var onBeforeRowFunc = function(rowIndex, cells) {
dojo.forEach(cells[0], function(cell) {
//cell.attrs = "title='" + cell.value + "'";
cell.attrs = " title='NOOB' ";
});
};
var itemView = {
noscroll: true,
onBeforeRow: onBeforeRowFunc,
cells: [[
{ name: 'Item', field: 'Item', width: '200px' }
]]
};
var dataView = { /* elided */ };
var layout = [itemView, dataView];

So, basically, I'm attaching the attribute using the onBeforeRow callback of
the view.
It works for the header cells because the header cells seem to be generated
every time while data cells are cached in a property called "markup" and by
the time onBeforeRow is called, the html for the data cells have been
pre-generated and saved into this cache.

But the thing is custom styles and classes via properties customClasses and
customStyles (which don't seem to be documented) are applied (merged) every
time. I am thinking perhaps attribute was overlooked?

So, like I said, this may be a bug or not I will file a bug anyway and the
devs can close it if it's not.

I might just bite the bullet and move on from poor man's tooltip to a proper
one.

[Jiho]

So I went ahead and used dijit.showTooltip:

dojo.addOnLoad(function() {
var showTooltip = function(e) {
console.log("dude");
var msg;
if (e.rowIndex < 0) { // header
msg = e.cell.name;
} else {
var item = e.grid.getItem(e.rowIndex);
msg = e.grid.store.getValue(item, e.cell.field);
};
if (msg) {
console.log(msg);
dijit.showTooltip(msg, e.cellNode);
//dijit.showTooltip(msg, e.cellNode, ["below", "above",
"after", "before"]);
}
};
var hideTooltip = function(e) {
dijit.hideTooltip(e.cellNode);
};
dojo.connect(grid, "onCellMouseOver", showTooltip);
dojo.connect(grid, "onCellMouseOut", hideTooltip);
dojo.connect(grid, "onHeaderCellMouseOver", showTooltip);
dojo.connect(grid, "onHeaderCellMouseOut", hideTooltip);
// grid is the dijit
});

That works. The last argument to showTooltip though, doesn't seem to work.
It always appears "before".

The other thing is, this does not work in Firefox while it works fine in
IE6. On Firefox, the onCellMouseOver event handler does not even get
invoked.

I then tried the test page "test_grid_tooltip_menu.html" and while it works
fine in IE6, the grid doesn't even render in Firefox (3.6).