ExtJS ajouter une info-bulle dans un élément à l'intérieur iframe

Question

J'essaie d'utiliser tooltip dans un élément à l'intérieur d'un iframe (généré par le composant htmleditor).

Ceci est je suis en train:

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

Mais, lorsque le composant est montré, il apparaît dans une mauvaise position. Voir sur le violon.

Sencha Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1vj4

Answer 1

J'ai trouvé une solution!

elSpan.addEventListener("mouseover", function (e) { 
    var x = e.pageX; 
    var y = e.pageY; 
    var region = htmlEditor.getRegion(); 

    x += region.x; 
    y += region.y; 

    tTip.showAt([x, y]); 
});