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

Posted 2023-05-08

【中文标题】Twitter Bootstrap Twipsy - 悬停在工具提示上方

【英文标题】：Twitter Bootstrap Twipsy - Hovering above the tooltip

【发布时间】：2011-12-23 02:48:59

【问题描述】：

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

问题是当鼠标光标离开元素时，工具提示消失，用户无法访问工具提示内的链接（看看Demo 并看到您无法将鼠标光标放在小黑泡泡消失了）。

有办法解决吗？

谢谢。

【问题讨论】：

问题是：工具提示何时应该消失，如果它包含一个链接。一种方法是完全禁用eventOut

@Sn0opy 但是如果我禁用eventOut 事件，那么它不会永远消失，如果鼠标光标不在标记元素上方或工具提示本身上方，我确实希望它消失。跨度>

我认为这是对framework/js扩展的一个更大的改变。我建议您在项目站点上创建一个新问题/RFE：github.com/twitter/bootstrap/issues。有更多的人在使用 bootstrap，他们知道代码、它是如何工作的以及如何扩展它。

我遇到了类似的问题。当我启动它时，我注意到当您从 twipsy 图标中悬停时，它会将其透明 div 留在顶部，使图标默认为 curson 而不是指针。

【参考方案1】：

我很难相信 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 操作解决。

如果您需要它是原版 javascript，只需将其粘贴到 http://coffeescript.org/ 的“try coffeescript”控制台，它就会为您编译。

【参考方案2】：

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

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

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

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

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

希望我已经说清楚了。

【参考方案3】：

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

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

【讨论】：

这无济于事，因为它最终会淡出。 Twitter Bootstrap 工具包的创建者之一told me，我想做的事情目前是不可能的。

【参考方案4】：

您可以将 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 秒的时间点击链接。

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

【参考方案5】：

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