Плагин TinyMCE: показать всплывающую подсказку по элементу

Question

Можно ли показать всплывающую подсказку с содержимым HTML на элементе в редакторе TinyMCE? Я создаю плагин, который должен комментировать некоторые слова с дополнительным контентом, и я хочу показывать эти подсказки при наведении соответствующих слов. Проблема в том, что документация TinyMCE выглядит очень плохой.

Что-то вроде этого:

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

Я не использую HTML атрибут заголовка по умолчанию, потому что я хочу, чтобы включить пользовательский контент HTML в подсказке.

Answer 1

Так что я решил это сам, вроде хакки. Я использую функцию контекстного меню 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"); 
});