Question

我正在尝试将Twitter Bootstrap Twipsy用作悬停工具提示，并在工具提示中添加一个链接。

问题是，当鼠标光标离开元素时，工具提示消失，用户无法到达工具提示内的链接（看看Demo并看到你不能放你的鼠标光标在黑色泡泡上消失了。）

有没有办法解决它？

感谢。

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加载修复问题。

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

5 个答案: