Question

我一直在尝试一些不同的插件： - Tooltipster - Qtip2 - Protip

以及更多适用于Javascript的工具提示插件。

有一点我不太明白，如果JS和CSS的专家可以指出它，那就太好了。

对于我在那里尝试的每个插件，它们都为实际的工具提示框生成标记，而不是使用我为工具提示指定的标记。

我的意思是，让我说我有这样的事情：

<a href="#" class="tooltip-trigger">Hover Me</a>
<div class="tooltip-box">
    Lorem ipsum dolor sit amet
</div>

当我初始化插件并将鼠标悬停在“Hover Me”上时，它会创建一个“.tooltip-box”的克隆副本，并将其放在我的HTML页面的底部。

我的问题是，为什么不直接使用我定义的那个？技术上是否存在无法实现的目标？

我一直在寻找一段时间。我相信这是有道理的，但我无法在任何地方找到它。

任何帮助都将不胜感激。

Answer 1

我只能回答我维护的Tooltipster。在版本4中，Tooltipster确实使用您提供的div，而不是它的克隆。如果将contentCloning选项设置为true，它将仅使用克隆。克隆背后的原因是当你创建几个工具提示时，它们都应该使用单个元素作为内容，例如：

$('#origin1, #origin2').tooltipster({
    content: $('.tooltip-box')
})

您的div显然无法同时显示在两个工具提示中，因此您必须使用克隆。

默认情况下克隆对于大多数人来说可能没问题并且给他们省去了麻烦，但是当你想到它时我发现它是反直觉的（显然你也是如此）。这种魔法乍一看使事情变得简单，但最终使事情复杂化。所以它现在默认在Tooltipster中被禁用。