自舉工具提示交互和

我有包裹<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」的unhighlight。工作正常。

除了突出顯示，我想顯示一個引導工具提示，或多或少也由「mouseenter」和「mouseleave」事件觸發。但是後者變得更加複雜：

問題：工具提示包含一些表單元素，現在用戶無法與這些表單元素進行交互，因爲工具提示位於包含文本和「當前調用$（'＃element'）。tooltip（'hide'）的mouseleave事件在用戶到達之前關閉工具提示。

我做了一些研究，發現在這裏可比較How to make bootstrap tooltip to remain visible till the link is clicked，但在這種情況下，工具提示保持打開狀態，直到用戶單擊工具提示中的鏈接。在我的場景中，用戶不一定必須與工具提示進行交互。所以必須有某種自動隱藏機制。

這怎麼解決？

來源

2014-08-30 Scholle

您可以使用Bootstrap Popover，它可以在懸停時觸發，因爲tooltip通常用於顯示消息。

這裏是小提琴只要您使用HTML元素中的數據內容，如

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

atrribute你應該添加更多的屬性http://jsfiddle.net/vzzxrLtk/

一個更重要的事情

data-html="true"

來源

2014-08-30 23:34:20 deepanshu

工具提示也可以在懸停時觸發。無論如何，你的方法是基於超時，給用戶一定的時間來達到彈出。尚未決定它是否是「最佳」方法。 – Scholle 2014-08-31 08:48:36

一種解決方案是使用Element.getBoundingClientRect（）方法獲取跨度的邊界框並保存屬性。

然後在上層容器上使用mousemove事件並檢查event.clientX/event.clientY是否超出邊界框。一旦發生這種情況，請關閉當前可見的工具提示。

顯示另一個工具提示mouseenter（span），並且僅當沒有顯示其他工具提示時才顯示。

在對邊界框的框架進行了一些微調之後，它的效果相當不錯。

來源

2014-08-31 08:54:14 Scholle

自舉工具提示交互和

回答

相關問題