tooltip and autoLoad problem

[pisces13]

Good day.

I have a program with different panels. Each panel would have a top toolbar containing a 'Help' Button.
I am trying to use autoLoad config on the button to show a tooltip. The tooltip gets its source from a HTML file. I would like to use autoLoad to call a function to find the HTML file according to different panels.
Example, panel Wizard will have a help file named wizard.html

My file structure is
/start.html
/js/start.js
/js/help.js
/manual/en/scrhelp/wizard.html
.........

some coding of start.js

Ext.onReady(function(){
    Ext.QuickTips.init();
    var tiptest = new Ext.ToolTip({
        autoLoad: HelpFunc('wizard','en')    // this function is found in help.js. wizard is fileName, en is Language
    });
    var start = new Ext.Panel({
        id: 'start-panel',
        border: false,
        renderTo: Ext.getBody(),
        tbar: new Ext.Toolbar({
            items: ['->',{
                text: 'Help Button',
                id: 'wizard',
                tooltip: tiptest
            }]
        }),
        html: 'this is a panel'
    });
});

help.js

function HelpFunc(panel,lang){
    var helpstr = '';
    var fileLocation1 = '{url: \'manual/';
    var fileLocation2 = '/scrhelp/';
    var str2 = '.html\'}'
    var fileName = '';
    var fileLang = '';
    var fileArray = new Array(3);
    var langArray = new Array(2);
    
    fileArray[0] = 'wizard';
    fileArray[1] = 'ra';
    fileArray[2] = 'wa';
    
    langArray[0] = 'en';    // english
    langArray[1] = 'ch';    // chinese
    
    for (i=0; i<langArray.length; i++)
    {
        if (lang == langArray[i])
        {
            fileLang = lang;
            helpstr = fileLocation1 + fileLang + fileLocation2;
            break;
        }
    }
    
    for (j=0; j<fileArray.length; j++)
    {
        if (panel == fileArray[j])
        {
            fileName = panel;
            helpstr = helpstr + fileName + str2;
            break;
        }
    }
    alert(helpstr);
    return helpstr;
    
}

My questions:
1. Is above implementation wrong? (i.e. is my concept wrong?)
2. I read the API doc of Ext.Button. Under 'tooltip' stated it accepts string or QuickTips config object. But when I read about QuickTips, it stated there it's a sigleton. I don't quite understand the word 'singleton'. Is it correct to use a ToolTip object for 'tooltip' config?
3. autoLoad config is
autoLoad: {url: 'someName.html'}
When I return a HTML string from HelpFunc, do I need to include the '{' and '}' like what I did in the function?

Any comment and error found please feel free to comment. I might also miss some important points.
I am trying my best effort to learn ExtJS.
Thank you.

[sword-it]

1. Actually, i cannot say it's wrong, but it looks like Ext.Button accepts tooltip property as a config object or a string, i guess that's how it works.

2. Here, you cannot use an instance of Ext.ToolTip, because tooltips of buttons, inputs and other various components refer to the same single QuickTip instance object. So, that's why it's not needed to get a new tip instance for each component if they are shown one by one. That makes your application lighter.

3. As a suggestion, use below for your toolbar button:

{
text: 'Help Button',
tooltip: {
autoLoad: HelpFunc('wizard', 'en')
}
}