Need to add a custom tooltip (quick tip) to rows in a GridPanel in ExtJS 4.0? Super easy. In your column definitions, simply add a rendered, passing a custom function.

this.columns = [
{
text: “Bookmark”,
dataIndex: “title”,
flex: 1,
renderer: function(value,metaData,record,colIndex,store,view) {
metaData.tdAttr = ‘data-qtip=”‘ + value + ‘”‘;
return value;
}
}…

A couple notes:

  1. Make note of the “metaData” object. I think in earlier versions, the “tdAttr” was just “attr”…so if you’re upgrading, you might have to make a slight change
  2. Notice the namespace for the qtip. In earlier versions of ExtJS, it was “ext:qtip”, but has been changed to “dadta-qtip”…no biggie, but a headache if you didn’t read the docs :)

That’s it! With such a slight modification, you get a nice tooltip generated for each row in your grid. Enjoy.