title: Tooltips overriding column display data in EXT JS 5
body: <p>I have a column grid issue where I want to take the data of a grid cell truncate it down to 50 characters and then have a tooltip show the full data.  </p>
  
  <p>I have the SQL service responding back with the truncated text called OfferTruncated and the full text called Offer in the model/store.  What's happening is all I am trying to display is OfferTruncated on the grid and Offer in the tooltip, but Offer is displayed in both.</p>
  
  <p>Here is the column item</p>
  
  <pre><code>{
          header: 'Offer',
          dataIndex: 'Offer',
          width: 300,
          renderer: function (value, metadata, record) {
              return getExpandableImage(value, metadata, record);
          }
      },
  </code></pre>
  
  <p>Here is the global function I made</p>
  
  <pre><code>function getExpandableImage(val, meta, rec, rowIndex, colIndex, store) {
  var deviceDetail = "Offer Terms: " + rec.get('Offer');
  meta.tdAttr = 'data-qtip="' + deviceDetail + '"';
  var value = rec.get('OfferTruncated')
  return value;
  }
  </code></pre>