Question about tooltips with ZeroClipboard

[tarebyte]

Hi There,

I apologize if this is not the right place to raise this issue, but I'm pretty stuck.

I have a button with a tooltip attached, which is also a zerclipboard object. When I hover over the button, the tooltip appears like it should but instantly goes away. However the tooltip works correctly when it is not a zeroclipboard object.

I tried to make a gif for a better demonstration, but Licecap isn't picking up on it for some reason.

Any advice would be much appreciated!

[tarebyte]

I got it to show intermittently here:

[mdo]

Maybe @jonrohan can help?

[jonrohan]

Hey @tarebyte 👋

Sorry when you mentioned this at the conf I thought you meant twbs/bootstrap.

I've seen that before, what's happening is the tooltip is showing, but the flash clipboard object is being moved in front of the element and it's loosing it's hover state. The way we take care of that here, is we move the tooltip classes to the flash bridge on zeroclipboard.

  buttonOver = ->
    # Remove tooltip from native copy button.
    this.classList.remove 'tooltipped', 'tooltipped-s'

    # Add a tooltip to the bridge.
    aria_label = $(this).attr 'aria-label'
    $('#global-zeroclipboard-html-bridge')
      .addClass('tooltipped tooltipped-s')
      .attr('aria-label', aria_label or 'Copy to clipboard.')

  buttonOut = ->
    $('#global-zeroclipboard-html-bridge')
      .removeClass('tooltipped tooltipped-s')

  $(el).hover(buttonOver, buttonOut)

This is a coffeescript snippet that we use to move the tooltip to the bridge, then remove it when we move off it. Let me know if you have anymore questions 👌

[tarebyte]

Thanks @jonrohan! It was great meeting you yesterday.

I'll give this a whirl and let you know 😄

[tarebyte]

Just tried this out, it works perfectly. Thanks again for all of your help!