Bootstrap 工具提示交互和自动隐藏答案

【问题标题】：Boostrap tooltip interaction and automatic hidingBootstrap 工具提示交互和自动隐藏
【发布时间】：2014-08-30 17:47:58
【问题描述】：

我有一个带有包装 <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”上取消突出显示。工作正常。

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

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

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

如何解决？

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

这是小提琴 http://jsfiddle.net/vzzxrLtk/

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

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

atrtribute 你应该再添加一个属性

data-html="true"

【讨论】：

工具提示也可以在悬停时触发。无论如何，您的方法是基于超时，给用户一定的时间来到达弹出窗口。尚未确定它是否是“最佳”方法。

【解决方案2】：

一种解决方案是使用 Element.getBoundingClientRect() 方法获取范围的边界框并保存属性。

然后在上层容器上使用 mousemove 事件，检查 event.clientX/event.clientY 是否超出边界框。一旦出现这种情况，请关闭当前可见的工具提示。

仅在未显示其他工具提示时才显示另一个工具提示 mouseenter (span)。

在对边界框的框架进行了一些微调后，效果很好。

【讨论】：