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"控制台中,它就会为您编译.