ExtJS 在 iframe 内的元素中添加工具提示答案

【问题标题】：ExtJS add tooltip in a element inside iframeExtJS 在 iframe 内的元素中添加工具提示
【发布时间】：2017-05-15 14:46:22
【问题描述】：

我尝试在iframe（由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

【问题讨论】：

标签： extjs extjs6-classic

【解决方案1】：

我找到了解决办法！

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

【讨论】：