ExtJS add tooltip in a element inside iframe

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