Question

I’m trying to use Twitter Bootstrap Twipsy as a hovering tooltip with a link inside the tooltip.

The problem is that when the mouse cursor leaves the element then the tooltip disappears and users can’t reach the link inside the tooltip (take a look at the Demo and see that you can’t put your mouse cursor on the twipsy black bubble as it disappear).

Is there a way to fix it?

Thanks.

Answer 1

I find it difficult to believe that one of the creators of bootstrap told you this wasn’t possible, as it most definitely is – It just takes a bit of tinkering.

Here is the solution in coffeescript and jquery, tested and working:

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)

If you are working on an application that gets heavy traffic, has to work in old browsers or old computers, or otherwise is very performance-reliant, I would highly recommend rolling your own solution here, as using a lot of live handlers isn’t really a great idea. But for something small/normal, this works just fine. I’ve only found one small very strange bug that can come up (although it is rare) if you hover in a particular way. The overlap issue is solved by z-index manipulation.

If you need this is in vanilla javascript, just paste it into the “try coffeescript” console at http://coffeescript.org/ and it will compile for you.