PDA

View Full Version : Tooltips and textfield



maneljn
26 Oct 2012, 6:08 AM
Is there anyway to add a tooltip in config definition of a textfield ?

Farish
26 Oct 2012, 6:33 AM
by default no. but you can use the following override:


// Override for adding tooltips to form fields
Ext.override(Ext.form.Field, {
afterRender : function()
{
this.callParent(arguments);
try {
if(this.qtipText)
{
create_tooltip_fields(this, this.qtipText);
}
} catch(e){}
}
});

function create_tooltip_fields(field, tooltipText)
{
Ext.QuickTips.register({
target: field.getEl(),
title: '',
text: '<span style="">' + tooltipText +'</span>',
enabled: true,
trackMouse: true
});
var label = findLabel(field);
if(label)
{
Ext.QuickTips.register({
target: label,
title: '',
text: '<span style="">' + tooltipText +'</span>',
enabled: true,
trackMouse: true
});
}
}

var findLabel = function(field) {

var wrapDiv = null;
var label = null

// find form-element and label
wrapDiv = field.getEl().up('div.x-form-element');
if(wrapDiv)
label = wrapDiv.child('label');

if(label)
return label;

// find form-item and label
wrapDiv = field.getEl().up('div.x-form-item');
if(wrapDiv)
label = wrapDiv.child('label');

if(label)
return label;
}


then when creating your field you can simply use the qtipText config:



{
xtype: 'textfield',
fieldLabel: 'Name',
qtipText: "helloWorld"
}

This will create the tooltip for the textfield as well as its label. If you dont want the tooltip to appear on the label, you can just remove the corresponding code for Label in the above override and functions. You can also change qtipText to anything else you prefer.