PDA

View Full Version : [CLOSED] Form Tooltips in MVC



OriCoder
Jan 23, 2015, 1:00 PM
Hi guys,

I am trying to get tooltips on form fields in MVC, once established I would like to put in dynamic data so a call to a javascript function would work.

I can't find any MVC examples and have tried this with no sucess:


Html.X().TextField()
.FieldLabel("Address 1").ToolTips(t => Html.X().ToolTip().Html("My tooltip"))
.Name("Addr1")
.ID("Addr1")
.TabIndex(2)
.Width(275)
.Padding(5),

Thanks

OriCoder
Jan 23, 2015, 2:24 PM
After a bit of searching, trial and error and scratching my head I have come up with the example below, the only problem now is once the tooltip is up it doesn't go away...

View:



Html.X().TextField()
.FieldLabel("Address 1")//.ToolTips(t => Html.X().ToolTip().Html("My tooltip"))
.Name("Addr1")
.ID("Addr1")
.TabIndex(2)
.Width(275)
.Padding(5)
.Listeners ( ls =>
{
ls.Change.Handler = "getToolTip(55);";
}
)
,


JavaScript



function getToolTip(attribKey) {
var string = getTooltipText(attribKey)
new Ext.ToolTip(
{
target: this,
//title: 'Please click this button',
html: string
}
);


} // end of getToolTip

function getTooltipText(attribKey) {
var recordNumber = App.StoreChangeLog.find('AttribKey', attribKey);
var returnString;

if (recordNumber) {

var recordDate = App.StoreChangeLog.getAt(recordNumber).getData().T imeStamp;
var recordUser = App.StoreChangeLog.getAt(recordNumber).getData().U serGroupName;
var date = recordDate.toString();
date = date.substring(0,(date.indexOf(':')-3))

returnString = "Last changed by user " + recordUser + " on " + date + ".";
return returnString;
}
else
{
return "No recent changes."
}


} // end of getTooltipTExt


How Do I get the tooltip to disappear?

Thanks

Dimitris
Jan 23, 2015, 2:44 PM
Somehow, target is assigned to the whole window (this), which makes the tooltip ... sticky :)

The following should work:



new Ext.ToolTip(
{
target: App.Addr1,
//title: 'Please click this button',
html: string
}
);

OriCoder
Jan 23, 2015, 2:48 PM
A couple of improvements:

1. pass the field in so the tooltip only pops up on that field

ls.Change.Handler = "getToolTip(this, 55);";
2. a timeout to let the form loading catch up

I'm now having a problem that when I change records I am getting multiple tooltips (i.e that record and previously viewed records, how do I destroy all previously displayed tootltips - only for that field?

Dimitris
Jan 23, 2015, 3:19 PM
Every time the script is executed a new tooltip object is created and added to the field's Tooltips collection. What about a single tooltip that is either created the first time or updated?



function getToolTip(obj,attribKey) {
var string = getTooltipText(attribKey);
if (App.Tooltip1) {
App.Tooltip1.html = string;
}
else {
new Ext.ToolTip(
{
target: obj,
id: 'Tooltip1',
//title: 'Please click this button',
html: string
}
);
}

} // end of getToolTip

OriCoder
Jan 23, 2015, 3:29 PM
Sounds good, I will have loads of these so rather than handle each one individually can I do something like



function getToolTip(obj,attribKey) {
var string = getTooltipText(attribKey);
var tooltipName = "Tooltip" + attribKey;
if (App.tooltipName ) {
App.tooltipName .html = string;
}
else {
new Ext.ToolTip(
{
target: obj,
id: tooltipName,
//title: 'Please click this button',
html: string
}
);
}

} // end of getToolTip

Dimitris
Jan 23, 2015, 3:42 PM
You need to use

Ext.getCmp(tooltipName)

instead of

App.tooltipName

to make it work right.

OriCoder
Jan 24, 2015, 9:50 AM
Couldnt get the .html= string to work so did this instead:


function getToolTip(field, attribKey) {

var timeout = window.setTimeout(timeout, 150);

function timeout() {
var string = getTooltipText(attribKey)
var tooltipName = "Tooltip_" + attribKey;

if(Ext.getCmp(tooltipName)) {
Ext.getCmp(tooltipName).destroy();

new Ext.ToolTip(
{
target: field,
id: tooltipName,
html: string
}
);
}
else
{
new Ext.ToolTip(
{
target: field,
id: tooltipName,
html: string
}
);
}
}
} // end of getToolTip

Probably a little less efficient but works perfectly, thanks for your help!