Output tooltip if click on tool - extjs

Question

Hello I have a window with tools. I have the tool: 'help', and when clicking on it I want it to output a tooltip with text from my HTML file, but actually it shows alert('Help'), and it doesn't output from the file:
tools: [
{
type: 'refresh',
name: 'refresh',
tooltip: 'reload'
},
{
type: 'help',
handler: function (event, toolEl, panel) {
alert('Help');
var tooltips = [{
target: 'tip1',
html: 'A very simple tooltip'
}, {
target: 'ajax-tip',
width: 200,
autoLoad: {url: '/help/note/help.html'},
dismissDelay: 15000 // auto hide after 15 seconds
},
];
Ext.each(tooltips, function (config) {
Ext.create('Ext.tip.ToolTip', config);
});
},
}
]
This picture shows what I actually want:

Answer 1

You need to load the html file in an Ajay request from server and then create the tooltip in the success callback.
Ext.Ajax.request({
url: '/help/note/help.html',
success: function(response){
// in the success callback you get the html text in the response.responseText
// and then you can create a tooltip with the content of it
}
});
So you can do the following in the callback
var html = response.responseText;
var tooltip = {
target: 'ajax-tip',
width: 200,
html: html,
dismissDelay: 15000 // auto hide after 15 seconds
};
The full code should be
{
type: 'help',
handler: function (event, toolEl, panel) {
Ext.Ajax.request({
url: '/help/note/help.html',
success: function (response) {
var html = response.responseText;
var tooltip = {
target: 'ajax-tip',
width: 200,
html: html,
dismissDelay: 15000 // auto hide after 15 seconds
};
Ext.create('Ext.tip.ToolTip', tooltip);
}
});
}
}