Twitter Bootstrap Twipsy - 懸停在工具提示之上

Question

我正在嘗試使用Twitter Bootstrap Twipsy作為懸停工具提示，其中包含工具提示內的鏈接。

問題是，當鼠標光標離開元素時，工具提示消失，用戶無法到達工具提示內的鏈接（看看演示並看到你不能把你的鼠標光標放在twipsy黑色氣泡上它消失了）。

有辦法解決嗎？

謝謝。

Answer 1

我發現很難相信引導程序的創建者之一告訴你這是不可能的，因為它絕對是 - 它只需要一些修修補補。

這是coffeescript和jquery中的解決方案，經過測試和工作：

timer = null
el = null
el2 = null
$('[rel=twipsy]').live
  mouseenter: ->
    $('.twipsy').remove()
    $(this).twipsy('show')
  , mouseleave: ->
    el = $(this)
    timer = setTimeout((-> 
      el.twipsy('hide')
      $('body .twipsy:last-child').remove()
    ), 10)

$('.twipsy').live
  mouseenter: ->
    clearTimeout(timer)
    el2 = $(this)
    el2.css 'z-index', 1000 if el2.hasClass 'in'
  , mouseleave: ->
    timer = setTimeout((->
      el.twipsy('hide')
      el2.css 'z-index', 1
      $('body .twipsy:last-child').remove()
    ), 10)

如果您正在處理流量大的應用程序，必須在舊瀏覽器或舊計算機上工作，或者在性能上非常依賴，我強烈建議您在此處推出自己的解決方案，因為使用大量的實時處理程序不是真是個好主意。 但對於小/正常的東西，這很好用。 我只發現了一個很小的非常奇怪的錯誤，如果你以特定的方式盤旋，它可能會出現（盡管很少見）。 重疊問題通過z-index操作解決。

如果您需要這是在vanilla javascript中，只需將其粘貼到http://coffeescript.org/上的“try coffeescript”控制台中，它就會為您編譯。

Answer 2

我認為你真正需要的是Twitter Popovers。

http://twitter.github.com/bootstrap/javascript.html#popovers

工具提示僅用於顯示某些信息（這就是為什么它被稱為工具'提示'）。 如果您需要用戶交互，則需要使用Popovers。

現在，如果我們可以使用工具提示懸停實現相同的效果，那么可用性問題可能出現在可用性點上。 但這使用戶可以控制他想要進行交互的時間。 所以在我看來，它提高了可用性。 您無法告訴用戶在2秒內（超時設置）點擊鏈接，否則它將消失。 它對可用性不利

我很欣賞為這個答案所做的工作，雖然答案是正確的，但解決方案並非如此。

希望我已經清楚了。

Answer 3

如果您閱讀上面的評論並且似乎遇到了同樣的問題，那么這對我有用。

您可以設置動畫的延遲大約300毫秒，它實際上提到在文檔中做了。

Answer 4

您可以將twipsy的觸發器設置為'manual'，然后將諸如'mouseenter'之類的事件綁定到一個函數，該函數使用計時器在關閉之前等待幾秒鍾。 嘗試這個：

$(element).twipsy({
    trigger:'manual'
});
$(element).bind('mouseover',function(){
    $(element).twipsy('show');
    if ( $(element).data('timerIsGoing') !== true ) {
        $(element).data('timerIsGoing',true);
        setTimeout(function(){
            $(element).twipsy('hide');
        }, 2000);
    }
});

這將為用戶提供2秒的點擊鏈接。

此外，我剛剛注意到您的問題是附近可能有其他工具提示重疊。 在鼠標懸停時您可以觸發隱藏所有其他活動工具提示的自定義事件......只是一個想法

Answer 5

我確實有同樣的問題，但我加載了jQuery.js和Prototype.js。 防止prototype.js加載修復問題。