Creating Tooltip for Text Field in Extjs

This is the snippet

{
    xtype: 'textfield',
    anchor: '100%',
    name: 'Alamat',
    fieldLabel: 'Alamat',
    emptyText: 'Alamat',
    listeners : {
       render: function(p) {
            var theElem = p.getEl();
            var theTip = Ext.create('Ext.tip.Tip', {
                html: 'Tuliskan nama jalan dan nomor rumah.<br>Misal: Jl. Merak, No. 3',
                margin: '0 0 0 200',
                shadow: false
            });
           
            p.getEl().on('mouseover', function(){
                theTip.showAt(theElem.getX(), theElem.getY());
            });
           
            p.getEl().on('mouseleave', function(){
                theTip.hide();
            });
        }
    }
},
Advertisements

2 comments

  1. {
    xtype: ‘textfield’,
    anchor: ‘100%’,
    name: ‘Alamat’,
    fieldLabel: ‘Alamat’,
    emptyText: ‘Alamat’,
    tooltip: ‘Tuliskan nama jalan dan nomor rumah’,
    listeners : {
    render: function(p) {
    p.getEl().down(‘input’).set({‘data-qtip’: p.tooltip});
    }
    }
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s