Posts Tagged ‘tooltip’

Adding QTips to GridPanel cell in ExtJS 4.0

November 8th, 2014 No comments

Need to add a custom tooltip (quick tip) to cell in a GridPanel in ExtJS 4.0? In your column definitions, simply add a attribut “rendered”, passing a custom function.

columns [
        metaData.tdAttr = 'data-qtip="' + value + '"';
        return value;

A couple notes:

  1. To show tooltip, you need to add line “Ext.QuickTips.init();” before Grid definition
  2. data-qtip is one of four attributes for tooltip. Tooltip attributes are:
    • data-qtip – Set tooltip text content
    • data-qtitle – Set the title
    • data-qwidth – Set tooltip width
    • data-qalign – Represented by a reference point that corresponds to the original, which reference point. For example: “tl-br” is represented by the tip of the upper left corner, corresponding to the lower right corner of the original

With such a modification, you get a nice tooltip generated for each cell in your grid.

Categories: JavaScript Tags: , ,

Tab tooltip in ExtJS4

November 24th, 2012 No comments

The third version of the popular work environment existed attribute for this action. It is tabTip attribute. In version 4 is thrown but here are two suggestions on how to do this.
The first uses tabConfig attributes as follows:

tabConfig : {
    tooltip:'tooltip text'

The second method is using the tab object as follows:'tooltip text');
Categories: JavaScript Tags: ,