TinyMCE插件：显示元素的工具提示

是否可以在TinyMCE编辑器中的元素上显示包含HTML内容的工具提示？我正在创建一个插件，该插件必须用附加内容注释一些单词，我希望在悬停相关单词时显示这些工具提示。问题是TinyMCE文档似乎非常糟糕

大概是这样的：

editor.on("click", function(e) {
    editor.showTooltipOnElement(e.target, "<p>Hello, I am a tooltip");
});

<span data-mytooltip="My Tooltip">This</span> is content in TinyMCE

editor.on（“单击”），函数（e）{
showToolTipElement（例如，target，“你好，我是一个工具提示”）；
});

---

我没有使用默认的HTML标题属性，因为我想在工具提示中包含自定义HTML内容。

所以我自己解决了这个问题，有点老套。我使用TinyMCE上下文菜单函数在所选元素上创建上下文菜单，然后用自定义HTML替换上下文菜单的内容。好处是，单击窗口中的任意位置也会再次隐藏菜单

editor.on("click", function(e) {
    var menu = new tinymce.ui.Menu({
        items: [{
            text: "Some tooltip text"
        }],
        context: "contextmenu",
        onhide: function() { menu.remove(); }
    });

    menu.renderTo(document.body);
    menu.$el.html(htmlGenerator());

    var pos = tinymce.DOM.getPos(editor.getContentAreaContainer());
    var targetPos = editor.dom.getPos(target);
    var root = editor.dom.getRoot();

    if(root.nodeName === "BODY") {
        targetPos.x -= root.ownerDocument.documentElement.scrollLeft || root.scrollLeft;
        targetPos.y -= root.ownerDocument.documentElement.scrollTop || root.scrollTop;
    } else {
        targetPos.x -= root.scrollLeft;
        targetPos.y -= root.scrollTop;
    }

    pos.x += targetPos.x;
    pos.y += targetPos.y;

    menu.moveTo(pos.x, pos.y + target.offsetHeight + 5);
    menu.$el.removeClass("mce-container");
});

---

我通过按钮属性上的工具提示解决了这个问题：

tinymce.init（{
……其他
设置：函数（编辑器）
{
editor.addButton（'mybutton'{
键入：“菜单按钮”，
工具提示：“我的自定义按钮”，
图标：“我的图标”，
菜单：[
{
文本：“行动A”，
onclick:function（）{
insertContent（{{A}}'）；
}
},
{
文本：“行动”，
onclick:function（）{
insertContent（{{B}}'）；
}
},
]
});
}
…其他
});

---

关于

工具提示的问题是，如果指定给TinyMCE内容中的元素，它将不会滚动。 除非将工具提示也移动到TinyMCE内容中并使用“.mce屏幕外选择”包装。 还有很多工作和可能的bug需要处理

最简单的解决方案如下：

editor.on("click", function(e) {
    editor.showTooltipOnElement(e.target, "<p>Hello, I am a tooltip");
});

<span data-mytooltip="My Tooltip">This</span> is content in TinyMCE

---

你明白了。

这是一个很好的例子，请注意，要将其作为工具提示，请使用：var tooltip=new tinymce.ui.tooltip（{text:“some tooltip”}）；