ExtJS add tooltip in a element inside iframe - extjs

Question

I'm try to use tooltip in a element inside a iframe(generated by htmleditor component).
This is i'm trying:
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();
});
}
}
}])
}
}
});
But, when the component is shown, it appear in wrong position. See on the fiddle.
Sencha Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1vj4

Answer 1

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