Show ExtJS ToolTip on click only

Question

I want to show an ExtJS ToolTip as the result of a button click. When the User clicks the "X" or clicks the button a 2nd time the ToolTip should disappear (note I did not say "hidden"). If the user clicks the button a third time the Tip should show up again.

My problem is that if you hover over the button, the ToolTip shows up. (See fiddle) I only want it as a result of a button click.

I have tried calling "remove()" on the component to remove it from the DOM in the "onbeforeclose()" and "beforehide()" events but the Tip still shows up on hover.

I also want to note that calling the "close()" method from the documentation does not actually trigger the "onbeforeclose()" event - which doesn't really make sense to me...

All of the Sencha examples show the Tip on hover. Is it even possible to only show the Tip after a click event?

Here's the code from the Fiddle:

function onClick() {
    window.Ext.create('Ext.tip.ToolTip', {
        target: 'div123',
        html: 'I am a tip',
        autoShow: true,
        autoScroll: true,
        focusOnToFront: true,
        autoHide: true,
        closable: true
    });
}

window.Ext.create('Ext.Button', {
    id: 'btn123',
    renderTo: 'div123',
    text: 'click me',
    width: '100px',
    handler: onClick
});

I'd also like to mention that I am aware I am creating a new ToolTip each time you click the button. I am aware and it is desired behavior. My problem is that I want a NEW Tip to show each time you CLICK - not show the old one on hover.

1. Documentation
2. ExtJS Examples
3. My fiddle

Answer 1

Remove the target and there will be nothing to hover.

Use the Ext.tooltip.Tooltip#show method to display your tooltip when you want it.

Keep a reference to the created tooltip to be able to destroy it when needed.

See your updated fiddle .

Finally, are you sure you want your tooltip to autohide? That doesn't seem to fit with what you're trying to achieve overall...