javascript - Bootstrap tooltip交互和自动隐藏

Question

我有一个包裹 <span> 的文本部分:

<span id="id1">Text1 Text1 Text1</span><span id="id2">Text2 Text2 Text2</span><span id="id3">Text3 Text3 Text3</span>

这是一个简化的例子。在我的用例中，有更多的文本，任何给定的部分都可能跨越一行或多行。

我将事件触发器附加到 span 元素，这些元素在“mouseenter”上突出显示相应的文本部分，在“mouseleave”上取消突出显示。工作正常。

除了突出显示之外，我还想显示一个 Bootstrap 工具提示，或多或少也由“mouseenter”和“mouseleave”事件触发。但后者变得更加复杂:

问题:工具提示包含一些表单元素，现在用户无法与这些表单元素交互，因为工具提示位于包含文本和当前调用 $( '#element').tooltip('hide') 在用户到达之前关闭工具提示。

我做了一些研究，在这里找到了类似的东西 How to make bootstrap tooltip to remain visible till the link is clicked ，但在这种情况下，工具提示将保持打开状态，直到用户单击工具提示中的链接。在我的场景中，用户不一定要与工具提示进行交互。所以必须有某种自动隐藏机制。

如何解决？

Answer 1

您可以使用 Bootstrap Popover，它也可以在悬停时触发，因为工具提示通常用于显示消息。

这是 fiddle http://jsfiddle.net/vzzxrLtk/

每当您在数据内容中使用 HTML 元素时，还有一件更重要的事情

data-content='<div id="insideDiv"><input type="text"></input><button class="btn btn-primary">Save</button></div>'>

属性你应该再添加一个属性

data-html="true"