Bootstrap tooltip disappears immediately

[eappell]

I'm trying to apply a tooltip to elements that trigger a copy using ZC, but when I mouse over those elements, the tooltip appears for just a fraction of a second and then fades away. I'm not sure how to get this to work, but if anyone has a solution for this, please share the code. I've tried using the css effects classes, but when I apply the tooltip to them I get no tooltip at all...

Thanks!

[JamesMGreene]

This should be fixed in the future v2.0.0 release after #81 is resolved.

[eappell]

Thanks for the quick response James - I'll look for that release.

[meleyal]

@eappell for now you could try manually triggering the tooltip e.g.

client.on('mouseover', function() {
  btn.tooltip('show')
}

[eappell]

Thanks, I tried that but the tooltip just shows for a split second then disappears. Not really any better than before.

[meleyal]

Do you have the tooltip configured to show/hide manually?

btn.tooltip({ trigger: 'manual' })

[eappell]

Yes, here's the code I use to attach the ZC and the tooltip:

var copyClient = new ZeroClipboard($("#btnCopy"));
copyClient.on('mouseover', function () {
   $("#btnCopy").tooltip({ trigger: 'manual' }).tooltip('show');
});

[meleyal]

Did you try initializing the tooltip first, then showing it?

var copyClient = new ZeroClipboard($("#btnCopy"));
var copyBtn = $("#btnCopy").tooltip({ trigger: 'manual' });

copyClient.on('mouseover', function () {
    copyBtn.tooltip('show');
});

[eappell]

Just tried that and I get the same result.

[meleyal]

Is the mouseover event firing repeatedly? If so maybe you could try debouncing it?

[JamesMGreene]

You may want to try configuring the container option:

var $copyBtns = $("#btnCopy");
var copyClient = new ZeroClipboard($copyBtns);
$copyBtns.tooltip({
  trigger: 'manual',
  container: 'body'
});

copyClient.on('mouseover', function() {
  $(this).tooltip('show');
});

[eappell]

This does work for me if the target is a single container with just text inside. In other words, if I do this on a div with just text that is set as a button or a badge, the tooltip shows and remains on the screen (and I can hide it using the mouseout). If it's a button with a span inside (i.e. an icon) then it shows and immediately disappears. There are no events bound to the span, so not sure what's causing it to hide the tooltip as soon as it is shown...? Here's an example:

//This Works - tooltip shows and copy works:
<a href="#" data-clipboard-text="123456" title="Copy to Clipboard" rel="tooltip" class="label label-success copyTrigger">123456</a>

//This does not work - tooltip shows and then disappears, copy does work though
<button id="btnCopy" type="button" class="btn btn-default copyTrigger" title="Copy to Clipboard" data-placement="bottom" rel="tooltip">
     <span class="glyphicon glyphicon-paperclip"></span>
</button>

In the second case I am setting the text to copy using the setText method in the dataRequested event, which works fine for me.

[JamesMGreene]

@eappell: Did you try setting the container configuration as I mentioned above?

[eappell]

Yes, when I said 'this does work for me', I meant the method you described using the container configuration. That works, as long as the target is a single container with just text.

[JamesMGreene]

Hmm, that's not much better, then. I had hoped that would workaround the issue altogether.

Any workaround beyond that is going to need more specific knowledge of the Bootstrap code, e.g. like the workaround for Bootstrap modals freezing IE.

[JamesMGreene]

@eappell: Could you please kindly create a JSFiddle/JSBin that can reproduce this? Otherwise I'm a bit stuck. Thanks!

I wasn't able to follow through on #81 as expected, though I did as best as I could in making it more natural for MouseEvents than in v1.x. Not sure if that will be good enough for your use case or not but I'd be happy to play around with it more to try to find a solution if you give me a starting point (JSFiddle/JSBin).

[eappell]

Thanks James! I'm sorry, I've been buried in another project and haven't had time to get back into this and test it out. I will try to get to it tomorrow and let you know if this fix resolves the issue. I do appreciate you not giving up on it!

[JamesMGreene]

@eappell: Sounds good, thanks!

BTW, my previously mentioned code snippet would look more like the following with the v2.x API:

var $copyBtns = $('#btnCopy');
var copyClient = new ZeroClipboard($copyBtns);

// IMPORTANT: Unlike in the `v1.x` API, the `mouseover` is bound directly to the elements
$copyBtns
  .on('mouseover', function() {
    $(this).tooltip('show');
  })
  .tooltip({
    trigger: 'manual',
    container: 'body'
  });

[nikhilvij]

This doesnt seem to work. Is there a good workaround to get tooltip and zeroclipboard to play together?

[cismous]

  FixedBg.prototype.copyCodeEvent = function() {
    var clip, htmlBridge;
    clip = new ZeroClipboard(_copyBtn);
    htmlBridge = $('#global-zeroclipboard-html-bridge');
    htmlBridge.attr({
      'data-toggle': 'tooltip',
      'data-placement': 'bottom',
      'data-title': '点击复制'
    }).tooltip({
      trigger: 'manual',
      container: 'body'
    }).on('mouseenter', (function(_this) {
      return function() {
        htmlBridge.tooltip('show');
        return _codeBox.select();
      };
    })(this)).on('mouseleave', (function(_this) {
      return function() {
        return htmlBridge.tooltip('hide');
      };
    })(this));
    return clip.on('ready', (function(_this) {
      return function() {
        return clip.on('aftercopy', function() {
          if (_codeBox.val()) {
            return $('.tooltip .tooltip-inner').text('复制成功');
          } else {
            return $('.tooltip').hide();
          }
        });
      };
    })(this));
  };

this code is coffee compile and the code is work

[marcguyer]

It appears as if the mouseout event fires immediately after the mouseover event. Then again the mouseout event fires when the pointer actually leaves. However, this fiddle seems to disprove that theory:

http://jsfiddle.net/marcguyer/Q6e28/

[Misiu]

@marcguyer mouseout doesn't fire, Your button is just loosing pseudo css class .btn:hover. this can be easily fixed: jsfiddle this is happening because when You hover over button flash object is placed dicectly on top of that button, so button isn't hovered anymore.

If I'm wrong please correct me.

[marcguyer]

Thanks @tjagusz. That was a big help.

[JamesMGreene]

The work I was doing for Issue #463 (see comments in there for link to unmerged branch) would fix the eventing... but it's currently not working in Firefox, IE9-11, and Safari 8.0, so that's a big problem.

That branch does fix the eventing for Chrome, Opera, and Safari 6.1/7.0.

[JamesMGreene]

P.S. Help is welcomed if someone wants to carry that torch for a while... trying to get it all the faked eventing working correctly cross-browser has burned me out too badly for the moment.

[ttseng]

Did this ever get resolved? I'm running into the same issue.

[JamesMGreene]

Nope, watch #463 for more updates when I eventually find time again. :disappointed:

[Tigerman55]

Is this solved yet? If so, do you have a link to a webpage with the answer? I've looked everywhere for this.

[JamesMGreene]

@Tigerman55: Really? You looked everywhere? Like... at the comment immediately above yours that was from ~27 hours before your comment? :stuck_out_tongue_winking_eye:

Long-story-short: no, not resolved, and I can't find any free time to work on ZeroClipboard (or jQuery, or PhantomJS, etc.) lately. Believe me, that makes me very sad indeed. :cry:

[gritfish]

I know this is an incredibly old report but I found the tooltip disappearing issue was resolved immediately by adding "pointer-events: none;" to the tooltip class in the css.

[yitznewton]

I know this is an incredibly old report but I found the tooltip disappearing issue was resolved immediately by adding "pointer-events: none;" to the tooltip class in the css.

@gritfish this worked for us :sparkling_heart: you just won our day here at our shop