ExtJSはiframe内の要素にツールチップを追加します

Question

（htmleditorコンポーネントによって生成される）内の要素にtooltipを使用しようとしています。

Ext.tip.QuickTipManager.init(); 

Ext.create('Ext.form.HtmlEditor', { 
    width: 750, 
    height: 250, 
    renderTo: Ext.getBody(), 
    listeners: { 
     afterrender: function() { 
      this.getToolbar().add([{ 
       xtype: "combobox", 
       flex: 1, 
       displayField: "name", 
       valueField: "value", 
       store: { 
        data: [{ 
         name: "#NAME# (User's name)", 
         value: "#NAME#" 
        }] 
       } 
      }, { 
       xtype: "button", 
       text: "Add", 
       handler: function() { 
        var value = this.prev().getValue(); 
        var htmlEditor = this.up("htmleditor"); 
        if (value) { 
         var id = Ext.id(); 
         value = "<span id=\"" + id + "\" style=\"cursor:pointer;\">" + value + "</span>"; 

         htmlEditor.insertAtCursor(value); 

         var doc = htmlEditor.getDoc(); 
         var elSpan = doc.getElementById(id); 

         var tTip = Ext.create("Ext.tip.ToolTip", { 
          html: "User's name tooltip.", 
          shadow: false, 
          scope: doc 
         }); 

         elSpan.addEventListener("mouseover", function() { 
          tTip.showAt(elSpan.offsetLeft, elSpan.offsetTop) 
         }); 

         elSpan.addEventListener("mouseleave", function() { 
          tTip.hide(); 
         }); 
        } 
       } 
      }]) 
     } 
    } 
}); 

をしかし、コンポーネントが表示されたとき、それは間違った位置に表示されます。

これは私がしようとしているです。フィドルを見てください。

煎茶フィドル：https://fiddle.sencha.com/#view/editor&fiddle/1vj4

Answer 1

私は解決策を見つけました！

​​