Is there an easy way to add Tooltips to form fields?

[cgi-bin]

I'm getting really frustrated trying to add some contextual help to form fields. I was using emptyText, but that ends up being submitted with the form.

I can't find an example in the docs or on the forums.

I've tried adding tooltip and qtip parameters to the field config.
I've tried setting an id param and using Ext.QuickTips.register({target: Ext.get('theID'), text: 'the text'});
I've tried var foo = new Ext.form.NumberField({...}); + Ext.QuickTips.register({target: foo, text: 'the text'});

I do have set: Ext.form.Field.prototype.msgTarget = 'side'; so I'm not sure if thats causing a conflict or not.

Can someone please provide a working example, or point me in the right direction?

[ToNiC]

If your using Ext form elements, there are config parameters you can set to enable and show tool-tips on validation errors.

The only thing I can think of is to initialize QuickTips by: Ext.QuickTips.init(), before you will use them in forms.

[cgi-bin]

Yeah, I have the quicktips.init() set, I'm using qtips in a few other places for toolbars and menu-items. The validation message shows up with an icon on the side which is what I want, I don't know if thats interfering with setting a normal tool-tip when they mouse-over the field itself.

I don't know enough of the guts of Ext to write an extension to enable a simple tooltip parameter. Was hoping someone might have an example so I wouldn't re-invent the wheel so-to-speak.

[krukow]

Hello,

I am just writing to say that I am looking to do the same thing. (Refreshing the thread)

For example


--- wierd form ---------------------------
complex label: [__________]

-----------------------------------------

the user doesn't understand what to type in the "complex label" field, so a tool-tip would be nice. It would be even better with a small '?' icon or having the label look 'active' somehow to indicate to the user that he can click it.

Has anyone made any progress in this direction?

Cheers,
- Karl

[dnixon]

Here's a brute force approach that searches for a label element with the appropriate text -
obviously if you have duplicate labels you need to differentiate somehow.
Also it's a linear search so if you have many labels it may be slow.
[PS - better to do the select once, then iterate through all labels adding QuickTips].


// get element for form label
function getLabelEl(label) {
var labels = Ext.DomQuery.select('label');
for(var i = 0; i < labels.length; i++) {
if(labels[i].textContent === label) {
return labels[i];
}
}
return null;
}


And then to add the QuickTip:


// add quicktip to label
var thisLabel = getLabelEl('MyLabel:');
if(thisLabel !== null) {
Ext.QuickTips.register({
target: thisLabel,
trackMouse: true,
text: 'Body of the quicktip - any HTML',
title: 'Title of the quicktip - any HTML'
});
}

[beavx420]

I did something similar to dnixon where I'm adding the tooltips to the label after the form has been rendered. The problem I have run into is that Firefox does not like to show the tooltips when its on a label tag. It seems to run fine with IE7.

[dnixon]

Interesting - I had only tested QuickTips on form labels in FF 2.0.0.5 (they work OK), but I just tried it in IE6 and the QuickTips do not appear on labels. In IE6 they do appear on things like toolbar buttons. I am using 1.1rc1.

[krukow]

thanks for the replies...


- Karl

[dnixon]

Still trying to figure out why this doesn't work for me in IE6 (OK in FF 2.0.0.5).
My code to find label elements:

// get element for form label
function getLabelEl(label) {
var labels = Ext.DomQuery.select('label');
for(var i = 0; i < labels.length; i++) {
if(labels[i].textContent !== undefined) {
if(labels[i].textContent === label) {
return labels[i];
}
}
}
return null;
}

fails to find the label elements in IE6, because the textContent is undefined.
The label objects (nodes) in IE6 have nodeType 1 (Element), nodeName "LABEL" and nodeValue null.
How can I figure out the other properties of these label elements in IE6?

[dx]

This set the tooltip to the field label:

function setFormFieldTooltip(id, tip){
var label = Ext.get('x-form-el-' + id).prev('label');
Ext.QuickTips.register({
target: label,
text: tip,
title: ''
});
}

[stefanminchev]

I think there is much clearer way to add tooltips. Instead of finding elements with their id, you can add a listener for the render event in your form item which will add the tooltip upon rendering.


for (var i=0; i<objFunction.params.length; i++) {
var param = objFunction.params[i];
formItems.push(new Object({
fieldLabel: param.caption,
name: param.name,
id: param.name,
tooltipText: "test",
// This is the event listener for a single form item
listeners: {
render: setFormFieldTooltip
}
}));
}

var inputPanel = new Ext.FormPanel({
labelWidth: 100, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
bodyStyle:'padding:5px 5px 0',
defaults: {width: 230},
defaultType: 'textfield',
buttonAlign:'left',
region:'center',
items: formItems,

buttons: [{
text: 'Next >>'
}]
});

// And this is the function that handles the event
function setFormFieldTooltip(component){
Ext.QuickTips.register({
target: component,
text: component.tooltipText,
title: ''
});
}

[techwolf]

Referring the above example, it has one flaw so far that I've found. If you are setting Ext.form.Field.prototype.msgTarget to 'qtip' the qtip error will naturally not display. You have to use 'side' or 'under'. Using title works but with an unintended overlapping problem, so I don't recommend it either. I stuck with side and it's working fine so far.

This bit combines the past examples into something (hopefully) easy to follow and sticks the qtip on the label, not the form, so the above problem doesn't occur.

Put this function in your onReady...

function setFormFieldTooltip(component){
var label = Ext.get('x-form-el-' + component.id).prev('label');
Ext.QuickTips.register({
target: label,
text: component.tooltipText,
title: ''
});
}



Then in each form element, the following two items need to be added:

tooltipText: "This is address 1.<br>This is an optional field.",
listeners: {
render: setFormFieldTooltip
}


Example with optional styling:

items: [{
fieldLabel: "Address 1",
name: 'address1',
allowBlank: true,
labelStyle: 'cursor: help;',
tooltipText: "This is address 1.<br>This is an optional field.",
listeners: {
render: setFormFieldTooltip
}
}]


Although this is posted in the 1.x forum, this works fine in 2.0.

[NoahK17]

That works perfectly techwolf. Thanks!