extjs4 display tooltip on button click instead of mouse hover

extjs, extjs4.1, javascript, tooltip

Solution

Yes, on `click` you can show the tooltip programmatically, skip the `target` and add a `showAt()`:

...

listeners: {
    click: function(cmp) {
        Ext.create('Ext.tip.ToolTip', {
            closable:true,
            hideDelay : 3000,
            padding: '0 0 0 0',
            maxWidth:400,
            width:800,
            html: "<b>read-only</b>:Users will have read only access to all pages",
        }).showAt([810, 340]);

    }
}

If you don't need the automatic hiding (your tooltip is closable anyway) you can make it just an `Ext.tip.Tip`:

        Ext.create('Ext.tip.Tip', {
            closable:true,
            padding: '0 0 0 0',
            maxWidth:400,
            width:800,
            html: "<b>read-only</b>:Users will have read only access to all pages",
        }).showAt([810, 340]);

Problem

I am trying to add a on click listener to the below tooltip. I do not want the tooltip to display on mouse hover. Instead it need it show on button click. Do I have to add a handler function inside a listener? ``` { xtype: 'button', cls:'my-btn', iconCls:'question', src:'../www/css/slate/btn/question.png', padding: '5 0 0 0', listeners: { render: function(cmp) { Ext.create('Ext.tip.ToolTip', { closable:true, hideDelay : 3000, padding: '0 0 0 0', maxWidth:400, width:800, target: cmp.el, html: "<b>read-only</b>:Users will have read only access to all pages", getTargetXY: function() { return [810, 340]; } }); } } }, ```

Original source