extjs - Set tooltip on click event on the grid cell -

i'm trying show tooltip when user clicks on grid cell. when click on cell, tooltip appears. problem is, after click, keeps popping whenever move mouse on other cell. i'm using ext js 4.2.1. let down code treating cellclick event in controller , way creating 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;                                  }                         }     }); }                                

i found solution problem, leave open in case give better solution.

well, tooltip appear when clicked , vanish when move mouse, added event in controller called itemmouseleave. thus, when item under mouse change destroy tooltip added view. final code 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);                                          }                               }