Enable and disable ExtJS tooltip from toolbar items - extjs

Question

In my toolbar there is checkbox used for enabling and disabling tooltip. If the checkbox is checked then I should enable tooltip and it is working if not then I should disable it also working. After disabling tooltip, when click on toolbar not on any item in the toolbar then also it is enabling.
toogleTooltip is a handler of checkbox
function toggleTooltip() {
debugger;
if (Ext.getCmp("msai_tool_tip").checked) {
Ext.QuickTips.enable();
while (!Ext.QuickTips.isEnabled())
Ext.QuickTips.enable();
} else {
Ext.QuickTips.disable();
while (Ext.QuickTips.isEnabled())
Ext.QuickTips.disable();
}
}
This is my toolbar creation code:
Ext.QuickTips.init();
var tb = new Ext.Toolbar({
id: 'form_menu_bar',
renderTo: Ext.get('newproducttitle').dom,
items: [{
tooltip: {
text: "Click on this button to generate the template and save it in server.",
title: "Save",
xtype: "quicktip"
},
iconCls: 'msai_save_template',
handler: generateTemplate
}, {
tooltip: {
text: "Click on this button to generate the template.",
title: "Save to clipboard",
xtype: "quicktip"
},
iconCls: 'msai_save_clipboard',
handler: generateTemplateClipboard
}]
});
Please suggest some solution so that I should not show tooltip, if user click on toolbar not in any item.

Answer 1

Please find the below fiddle to check working example:
https://fiddle.sencha.com/#view/editor&fiddle/2c7k
Code snippet:
Ext.QuickTips.init();
var tb = new Ext.Toolbar({
renderTo: document.body,
width: 600,
height: 100,
items: [{
// xtype: 'button', // default for Toolbars, same as 'tbbutton'
text: 'Button',
tooltip: 'button'
}, {
xtype: 'splitbutton', // same as 'tbsplitbutton'
text: 'Split Button',
tooltip: 'Split Button'
}, {
xtype: 'checkbox',
boxLabel: 'enable tooltip',
checked: true,
listeners: {
check: function (checkbox, newValue, oldValue) {
if (newValue) {
Ext.QuickTips.enable();
} else {
Ext.QuickTips.disable();
}
}
}
}]
});