3

我正在尝试使用Twitter Bootstrap Twipsy作为悬停工具提示，工具提示内有一个链接。

问题是，当鼠标光标离开元素时，工具提示消失，用户无法访问工具提示内的链接（查看演示，发现您无法将鼠标光标放在 twipsy 黑色气泡上它消失了）。

有没有办法解决它？

谢谢。

4

5 回答 5

7

我很难相信 bootstrap 的创建者之一告诉你这是不可能的，因为它肯定是 - 只需要一点点修补。

这是经过测试和工作的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”控制台中，它就会为你编译。

于 2012-01-03T15:59:41.763 回答
2

我认为你在这里真正需要的是 Twitter Popovers。

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

工具提示仅用于显示一些信息（这就是为什么它被称为工具“提示”）。其中，如果您需要用户交互，则需要使用 Popover。

现在在可用性点上可能会出现一个问题，如果我们可以使用工具提示悬停来实现相同的效果，为什么要增加用户点击。但这让用户可以控制他想要进行交互的时间。所以在我看来，它提高了可用性。您不能告诉用户在 2 秒（超时设置）内单击链接，否则它将消失。它不利于可用性

我很欣赏为这个答案所做的工作，虽然答案是正确的，但解决方案不是。

希望我已经说清楚了。

于 2013-02-06T11:05:30.747 回答
1

如果您阅读了我上面的评论并且似乎遇到了同样的问题，那么这对我有用。

您可以在文档中实际提到的大约 300 毫秒的动画上设置延迟。

于 2011-11-16T16:34:00.717 回答
1

您可以将 twipsy 的触发器设置为“手动”，然后将诸如“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 秒钟的时间单击链接。

另外，我刚刚注意到您的问题，即附近可能有其他工具提示重叠。在鼠标悬停时您可以触发隐藏所有其他活动工具提示的自定义事件......只是一个想法

于 2011-12-02T15:57:58.577 回答
0

我确实遇到了同样的问题，但我同时加载了 jQuery.js 和 Prototype.js。阻止prototype.js 加载解决了这个问题。

于 2014-03-12T00:54:07.937 回答