ExtJS добавляет всплывающую подсказку в элемент внутри iframe

Я пытаюсь использовать tooltip в элементе внутри iframe (сгенерированного компонентом htmleditor).

Это я пытаюсь:

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

Но когда компонент отображается, он появляется в неправильном положении. Смотрите на скрипке.

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


extjs extjs6-classic
person Lucas Fontes Gaspareto    schedule 15.05.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел решение!

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]);
});
person Lucas Fontes Gaspareto    schedule 15.05.2017