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.

Share this: