Question

我在fieldLabel中添加了一个图标。在鼠标悬停图标时，我会显示工具提示。但是在mouseout上，工具提示不会被隐藏/破坏。

我的目标是否正确？我还尝试了target:a.target,和target:a.target.id

Here是小提琴。

由于

Answer 1

试试这样 var shows = Ext.create（＆＃39; Ext.data.Store＆＃39;，{ 字段：[＆＃39; id＆＃39;，＆＃39; show＆＃39;]，数据：[ {id：0，显示：＆＃39;太空堡垒卡拉狄加＆＃39;}， {id：1，显示：＆＃39; Doctor Who＆＃39;}， {id：2，显示：＆＃39; Farscape＆＃39;}， {id：3，显示：＆＃39; Firefly＆＃39;}， {id：4，显示：＆＃39;星际迷航＆＃39;}， {id：5，显示：＆＃39;星球大战：圣诞节特别＆＃39;} ] }）;

                                        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
                                            }]
                                        });

ExtJS / HTML - 工具提示不会隐藏在mouseout上

1 个答案: