如何将 DOM 元素转换为工具提示？

Question

我想在工具提示中转换一个已经存在的 div 元素，该元素在关闭之前一直保持打开状态。我尝试使用 JQuery 官方 tooltip plugin. I found a way 在 mouseleave 时不关闭它，但它需要一个内容字符串，我无法传递 DOM 元素。

即使 there's a trick 传递 HTML 内容，我也需要原始 DOM 元素，因为事件已绑定到它。

qTip2 似乎可以做到，但是 elements must be adjacent 他们做不到。

现在我已经手动完成了，但我不确定我是否涵盖了错误定位的所有微妙可能性。而且长得丑。

Answer 1

好的，我发现您可以在 jQuery UI 中使用 open 和 close 事件来执行此操作。基本上你所做的就是将你的元素连接到现有的 UI。我通过 reading the docs 解决了这个问题，你也可以这样做。

$("#tooltip").tooltip({
    content: function() {
        // Return nothing here, because only strings are accepted
        return " ";
    },
    open: function( event, ui ) {
        var element = ... create or get element here ...;
        ui.tooltip[0].appendChild(element);
    },
    close: function( event, ui ) {
        // Destroy the element? 
    }
});

我创建了一个 jsFiddle，其中 <input 从 <body> 传送到工具提示：

https://jsfiddle.net/kujo54cq/1/

如何将 DOM 元素转换为工具提示？

How to transform a DOM element into a tooltip?

javascript

tooltip