ExtJs Tooltip

Tooltip in ExtJs - There are various ways to get tooltip in ExtJs, we will explore different options in below list.

1. Tooltip in Grid header -

new Ext.grid.GridPanel({

        store: store,

        columns: [

                       {

                           id       :'company',

                           header   : 'Company',

                           tooltip  : 'Company Name', 

                        width    : 160, 

                        sortable : true, 

                        dataIndex: 'company'

                    },….

            ]

            })

2. Get Tooltip on all the grid options – You need to use metadata attribute to set the tooltip on the grid items. Consider below example where pctChange is renderer on grid column.

    function pctChange(val, metadata) {

            metadata.attr = String.format('{0}title="{1}"', metadata.attr, val);

    }

3.  Tooltip on other form items –

 {

    xtype           :   'textfield',

    fieldLabel   :    “<span ex:qtip=’Please Contact admin for more info.’>Comments</span>”,

    ref               :    'comtext'

 }

if you want html behavior on the tooltip, you can provide tags in span –

{

   xtype           :   'textfield',

   fieldLabel   :    “<span ex:qtip=’<b>Please Contact admin for more info.</b><br>admin@test.com’>Comments</span>”,

   ref               :    'comtext'

}

4. Other common and most asked place for tooltip is on drop down/combo, which is tough to achieve as there is no default way to get it, you have to use various tricks to get it...coming soon…

Feel free to drop comments, questions!