如何将 DOM 元素转换为工具提示？ [关闭]答案

【问题标题】：How to transform a DOM element into a tooltip? [closed]如何将 DOM 元素转换为工具提示？ [关闭]
【发布时间】：2016-02-20 01:07:33
【问题描述】：

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

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

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

目前我已经手动完成了，但我不确定我是否涵盖了错误定位的所有微妙可能性。而且它看起来很丑。

【问题讨论】：

绑定到工具提示元素时哪些事件有意义？我的意思是，你不能点击或悬停它，那有什么意义呢？
关于关闭请求：询问有关特定工具的问题是主题。提出问题以获得建议是题外话。
@TomášZato：我想要一个仅在单击时打开并保持打开状态的工具提示。我找到了一种使用 jQuery 插件的方法，但上述问题仍然存在。
@Reeno：不问建议。我不是在问“什么是最好的工具……”，而是在问一个非常具体的问题的工具。如果这个问题是题外话，那么像“语言 X 有没有办法做 Y”之类的每个问题都是题外话。
@Reeno：好的，我认为您指的是指南的第 4 点。我编辑了标题。

标签： javascript tooltip

【解决方案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/

【讨论】：