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.

rixo rixo · Accepted Answer · 2013-08-21T20:29:00

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...

Show ExtJS ToolTip on click only

1 Answers