my Apps: * COOL MOVIE BROWSER (sports, tv on net) here * MONEY ON THREAD (personal finance) here * HIT-BALL (cute game) here

GXT - How to set tooltip for a grid cell

In the previous article we shown how to do the same thing, but for the framework GWT-Ext.

Now it's time to learn how to set the individual tooltips for each grid cell, not for the entire grid, with the GXT from ExtJS.

So, the drill is quite similar, but not exactly the same. We have to do 2 things:
 - first time we have to register a Tooltip Manager for the grid,  and
 - second time we define the renderer, which wraps the value in a "div" element with 2 special attributes "qtip" and "qtitle", like in the below code:

Grid grid = ...;

/** 1. register the tooltip manager for this grid */
new QuickTip(grid);

ColumnConfig cc = new ColumnConfig();
final String title = "Current Date";

/** 2. set the renderer for the grid cell */
cc.setRenderer(new GridCellRenderer<ModelData>() {
    public Object render(ModelData model, String property,
           ColumnData config, int rowIndex,
           int colIndex, ListStore<ModelData> store,
           Grid< ModelData> grid) {
                String value = model.get (property);
                if (value != null) {
                     return "<div qtitle='" + Format.htmlEncode(title) + 
                            "' qtip='" + Format.htmlEncode(value) + 
                            "'>" + value + "</div>";
                return value;

So, assuming that the current column is a "date" called "Current Date" we want to display the tooltip with the name and value (Current Date / 2008 January 22 11:25:00 PM) and nothing when the cell value is null. The above code is doing exactly just this.



  1. I have a picture in the grid cell, now the tooltip when the mouse does not work focuses on image.

  2. Can you post your code for the cell renderer, including the image, of course, please?


  3. This comment has been removed by the author.

  4. I solved it
    String message = " "imgsrc='images/custom/icons/lock.gif' border='0' style='vertical-align:middle;'"+" "ext:qtitle='" + Format.htmlEncode("Service taken over
    ") + "'" + " ext:qtip='" + Format.htmlEncode(" "+ "'")>";

  5. Great job, man ! So, my example wasn't that bad, eh?


  6. it all started from your example ;-)