我的文字包含<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元素和当前调用$的“mouseleave”事件上方（ '#element'）。tooltip（'hide'）在用户到达之前关闭工具提示。
我做了一些研究，发现了一些可比的How to make bootstrap tooltip to remain visible till the link is clicked，但在这种情况下，工具提示保持打开状态，直到用户点击工具提示中的链接。在我的场景中，用户不一定必须与工具提示进行交互。因此必须有某种自动隐藏机制。
怎么能解决这个问题？
答案 0 :(得分：0)
您可以使用Bootstrap Popover，它也可以在悬停时触发，因为工具提示通常用于显示消息。
这是小提琴 http://jsfiddle.net/vzzxrLtk/
在数据内容中使用HTML元素时更重要的一点是
data-content='<div id="insideDiv"><input type="text"></input><button class="btn btn-primary">Save</button></div>'>
atrribute你应该再添加一个属性
data-html="true"
答案 1 :(得分：0)
一种解决方案是使用Element.getBoundingClientRect（）方法获取span的边界框并保存属性。
然后在上部容器上使用mousemove事件并检查event.clientX / event.clientY是否超出边界框。在这种情况下，请关闭当前可见的工具提示。
显示另一个工具提示mouseenter（span），并且仅在未显示其他工具提示的情况下显示。
对边界框的框架进行一些微调后，效果非常好。