ExtJS/HTML - マウスアウト時にツールヒントが隠れていない

Question

アイコンをfieldLabelに追加しました。アイコンのマウスオーバー時に私はツールチップを表示します。しかし、マウスアウト時にツールヒントが隠されたり破壊されたりすることはありません。

ターゲットは正しいですか？私も試しましたtarget:a.target,とtarget:a.target.id

Hereはフィドルです。 [ 'ID'、 'ショー']、 データ：[ {ID：

おかげ

Answer 1

この VARショー= Ext.create（ 'Ext.data.Store'、{ フィールドよう試みます0、ショー： 'Battlestar Galactica'}、 {ID：1、ショー： 'Doctor Who'}、 {id：2、show： 'Farscape'}、 {id：3、show： 'Firefly'}、 {id：4、ショー： 'スタートレック'}、 {id：5、ショー： 'スターウォーズ：クリスマススペシャル'} ] }）;

         Ext.create('Ext.form.Panel', { 
              renderTo: Ext.getBody(), 
              title: 'Sci-Fi Television', 
              height: 200, 
              width: 500, 
              items: [{ 
               xtype: 'tagfield', 
               fieldLabel: 'Select a Show'+'<img id="test"       src="https://cdn0.iconfinder.com/data/icons/glyphpack/85/info-alt-128.png" style="height:15px;width:15px;">', 
               store: shows, 
               listeners: { 
                afterrender: function(){ 
                 var a = Ext.getElementById("test"); 
                 var tip = Ext.create("Ext.tip.ToolTip", { 

                header:false, 
                autoScroll:true, 
                autoHide:true, 
                autoDestroy:true, 
                closeAction:"hide", 
                target:a, 
                html:[    
                '<div class="hopscotch-bubble-container" padding: 5px;">',   
                '<div class="hopscotch-content">', 
                 '<h3 class="hopscotch-title"><b>Instructions</b></h3>', 
                 '<div class="hopscotch-content">field instructions here</div>', 
                '</div>',      
                '</div>', 
                '<div class="hopscotch-bubble-arrow-container left">', 
                '<div class="hopscotch-bubble-arrow-border"></div>', 
                '<div class="hopscotch-bubble-arrow"></div>', 
                '</div>' 
                ],   
                width:"auto", 
                height:"auto"   
               }); 

               tip.showAt(a.target.x,a.target.y); 

                } 
               }, 
               displayField: 'show', 
               valueField: 'id', 
               queryMode: 'local', 
               filterPickList: true 
              }] 
             });