Extjs Tooltip examples

Using the sencha ExtJs we can show the tooltip to the target fields. In many ways like below.

1. Button
     Using the tooltip config property of the button, we can show the tooltip on move over on the button.

Ext.create('Ext.Button', {
    text: 'Click me',
    tooltip: 'Click me',
    renderTo: Ext.getBody(),
    handler: function() {
        alert('You clicked the button!');
    }
});

The same result we can achieve in render function creating tooltip and assigning target and text.

 Ext.create('Ext.Button', {

    text: 'Click me',

   tip: 'Click me',

    renderTo: Ext.getBody(),

      listeners: {

        render: function(c) {

            Ext.create('Ext.tip.ToolTip', {

                target: c.getEl(),

                html: c.tip

            });

        }

    }

});

OR

Ext.application({
    name: 'Fiddle',

    launch: function() {
Ext.tip.QuickTipManager.init(); // Instantiate the QuickTipManager

 Ext.create('Ext.Button', {

     renderTo: Ext.getBody(),
     text: 'My Button',
     listeners: {

         afterrender: function(me) {

             // Register the new tip with an element's ID
             Ext.tip.QuickTipManager.register({
                 target: me.getId(), // Target button's ID
                 title : 'My Tooltip',  // QuickTip Header
                 text  : 'My Button has a QuickTip' // Tip content
             });

         }
     }
 });


    }
});