Configure tooltip in grid cell click event

Question

I’m trying to show a tooltip when the user clicks on a grid cell. When I click on a cell, the tooltip appears. The problem is that, after the click, it keeps popping up whenever I hover over any other cell. I am using Ext JS 4.2.1. I’ll drop the code of how I’m treating the cellclick event in the controller and how I’m creating the tooltip.

onCellClick: function (view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
    var store = Ext.getStore('pontoeletronico');        
    if (view.tip) {
        view.tip.destroy();                        
        view.tip = null;            
    }        
    if(cellIndex > 0 && cellIndex < 5) {
        view.tip = Ext.create('Ext.tip.ToolTip', {
            autoShow: false,
            showDelay: 0,                                    
            stateful: false,
            target: view.el,
            width: 100,
            title: 'Horário original',
            delegate: view.cellSelector,
            trackMouse: false,
            autoHide: true,
            listeners: {
                beforeshow: function (tooltip, eOpts) {
                    var ponto = store.findRecord('id', record.get('idPonto'));
                    var horario;
                    if (cellIndex == 1) {
                        horario = ponto.get('entrada01');                        
                    } else if (cellIndex = 2) {
                        horario = ponto.get('saida01');                        
                    } else if (cellIndex == 3) {
                        horario = ponto.get('entrada02');                        
                    } else if (cellIndex == 4) {
                        horario = ponto.get('saida02');                        
                    }
                    horario = horario != null ? Ext.Date.format(horario, 'H:i:s') : "--:--:--";                    
                    //tooltip.update(horario);
                    tooltip.html = horario;                    

                }                
            }
        });
    }                               
}

Answer 1

I found a solution to my problem, but I’ll leave it open in case someone gives a better solution.

Well, so that the tooltip only appeared when I clicked and disappeared when I moved the mouse, I added an event in the controller called itemmouseleave. This way, when the item, under which the mouse is, changes I destroy the tooltip added to that view. The final code is as follows:

onItemMouseLeave: function (view, record, item, index, e, eOpts) {
    if (view.tip) {
        view.tip.destroy();
    }  
},

onCellClick: function (view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
    var store = Ext.getStore('pontoeletronico');        
    if (view.tip) {
        view.tip.destroy();                        
        view.tip = null;            
    }        
    if(cellIndex > 0 && cellIndex < 5) {            
        view.tip = Ext.create('Ext.tip.ToolTip', {
            itemId: 'tooltip-horario',
            autoShow: false,
            showDelay: 0,                                    
            stateful: false,
            target: view.el,
            width: 100,
            title: 'Horário original',
            delegate: view.cellSelector,
            trackMouse: false,
            autoHide: true
        });
        var ponto = store.findRecord('id', record.get('idPonto'));
        var horario;
        if (cellIndex == 1) {
            horario = ponto.get('entrada01');                        
        } else if (cellIndex = 2) {
            horario = ponto.get('saida01');                        
        } else if (cellIndex == 3) {
            horario = ponto.get('entrada02');                        
        } else if (cellIndex == 4) {
            horario = ponto.get('saida02');                        
        }
        horario = horario != null ? Ext.Date.format(horario, 'H:i:s') : "--:--:--";                    
        view.tip.update(horario);                                     
    }                              
}