Extjs, Add tooltip to grid row

The purpose of this tutorial is how to add tooltips for row grids, you can you this when the row is a text field for example.

first of all we need to tell Extjs that row need to be rendered by a custom function, on the column Model add renderer attribute :


{
  id : 'motivation',
  header : 'motivation',
  width: 200,
  dataIndex : 'motivation',
  renderer:addTooltip,

then add the addTooltip function :


function addTooltip(value, metadata, record, rowIndex, colIndex, store){
    metadata.attr = 'ext:qtip="' + value + '"';
    return value;
}

17 Replies to “Extjs, Add tooltip to grid row”

  1. Pingback: Twitted by chedly
  2. Wow, its great. :). only 2 parametar required.

    function addTooltip(value, metadata){
    metadata.attr = ‘ext:qtip=”‘ + value + ‘”‘;
    return value;
    }

    **********Add on extJs Grid’s column

  3. I don’t know if it’s because I’m using Extjs4, but I have to change it a bit:

    I have an easy one, using the renderer function:

    {
    xtype : ‘gridcolumn’,
    dataIndex : ‘status’,
    text : ‘Status’,
    renderer : function(value, metadata) {
    metadata.tdAttr = ‘data-qtip=”‘ + value + ‘”‘;
    return value;
    }
    }

  4. What should I do if my text is a really long link without space? Then frame of qtip won’t spread and the text is outside of the frame. How can I adjust the size of that frame?

  5. Thanks……getting tool-tip now…..

    I want to display tool-tip only when data is truncated…..

    do you have a solution for that……

Leave a Reply