[CLOSED] Form Tooltips in MVC

[OriCoder]

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]

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().TimeStamp;
      var recordUser = App.StoreChangeLog.getAt(recordNumber).getData().UserGroupName; 
      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]

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]

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]

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]

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]

You need to use

Ext.getCmp(tooltipName)

instead of

App.tooltipName

to make it work right.

[OriCoder]

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!