Bootstrap + Zeroclipboard = Tooltips can't be shown on hover?

Question

I'm trying to use ZeroClipboard for a "Click to copy" feature on an element and the same time show a bootstrap tooltip.

Unfortunately the tooltip doesn't work if I use ZeroClipboard on an element. Any help would be greatly appreciated...

// BOOTSTRAP TOOLTIP
$('.myDiv').tooltip({
    title:      'Click to copy',
    placement:  'right',
    trigger:    'hover',
    animation:  true
});

// ZEROCLIPBOARD
var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
$('.myDiv').live('mouseover', function () {
  clip.setText($(this).text());

  if (clip.div) {
    clip.receiveEvent('mouseout', null);
    clip.reposition(this);
  } else clip.glue(this);

  clip.receiveEvent('mouseover', null);
});

zclip will place a SWF object above the element, so obviously it won't trigger the `mouseenter` handler from the element below the zclip used by the tooltip. I haven't used zclip in a while, but maybe a practical example would help finding an workaround. — Fabrício Matté, Dec 18 '12 at 17:39
Eh, reading on their dev page, zclip claims to preserve the `mouseenter` and `mouseleave` events.. Maybe try using the jQuery version of zclip? — Fabrício Matté, Dec 18 '12 at 17:42

score 6 · Answer 1 · answered Jul 01 '13 at 15:26

6

Managed to get it working in a very simple way

var zero = new ZeroClipboard($el);
$(zero.htmlBridge).tooltip({title: "copy to clipboard", placement: 'bottom'});

answered Jul 01 '13 at 15:26

gnorsilva

640
6
11

does sorrily does not work for me (maybe because its 3 years later). – b1nary Dec 26 '15 at 02:00

score 2 · Answer 2 · answered Feb 22 '14 at 09:49

Sometimes it is hard to get all the snippets together and to work ... this is a complete solution using ZeroClipboard 1.3.2 and Bootstrap 3.1.0:

HTML:

<a id="copycommand" href="#" data-clipboard-text="text to copy">Copy ...</a>

ZeroClipboard create a container with the ID global-zeroclipboard-html-bridge, this is the access point for the Bootstrap Tooltip.

jQuery:

// initialize Tooltip
$('#global-zeroclipboard-html-bridge').tooltip();

// ZeroClipboad
ZeroClipboard.config({ moviePath: 'ZeroClipboard.swf' });
var clip = new ZeroClipboard(document.getElementById('copycommand'));
clip.on('complete', function(client, args){
  alert("Copied text to clipboard: " + args.text);
});

// settings for the Tooltip    
clip.on('load', function(client) {
  $('#global-zeroclipboard-html-bridge').attr({
    'data-toggle':'tooltip',
    'data-title': 'Tooltip text goes here ...',
    'data-placement': 'bottom',
    'data-html': true
  });
  // show the tooltip
  $('#global-zeroclipboard-html-bridge').tooltip('show');
});

score 1 · Answer 3 · answered Jun 29 '15 at 10:27

1

If you run Tooltip after ZeroClipboard it should work without problems!

answered Jun 29 '15 at 10:27

Andrea Silvestri

1,082
4
14
41

score 0 · Answer 4 · answered Dec 18 '12 at 18:32

Found a workaround by putting the tooltip to be shown on click for Bootstrap, but then using hooks in ZeroClipboard to show and hide it upon hover.

Here is how I did it:

$('div.color-inspiration span').tooltip({
    title:          'Click to copy',
    placement:  'right',
    trigger:        'click',
    animation:  false
});


var element = null;
var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
$('div.color-inspiration span').live('mouseover', function () {
      element = $(this);

    clip.setText($(this).text());

    if (clip.div) {
        clip.receiveEvent('mouseout', null);
        clip.reposition(this);
    } else clip.glue(this);

    clip.receiveEvent('mouseover', null);
});

clip.addEventListener( 'onMouseOver', my_mouse_over_handler );
function my_mouse_over_handler( client ) {
    $(element).tooltip('show');
}

clip.addEventListener( 'onMouseOut', my_mouse_out_handler );
function my_mouse_out_handler( client ) {
    $(element).tooltip('hide');
}

clip.addEventListener( 'onMouseUp', my_mouse_up_handler );
function my_mouse_up_handler( client ) {
  $(element).tooltip('hide');
}

d3c0y · Answer 5 · 2013-05-28T02:33:58.187

Old question but I recently encountered this problem and was able to find a solution, it's rather simple but a bit blanket. Because the flash element positions itself with a zindex of 10000 on top of whatever element you have on the page you'll have to append the flash element with a selector and title. This can be done with the ZeroClipboard callbacks.

  clip.on( 'load', function(client) {
      $('#global-zeroclipboard-html-bridge').attr('rel', 'tooltip').attr('title', 'Click Here To Copy URL');
  } );

score 0 · Answer 6 · answered Mar 30 '15 at 12:57

With Zero Clipboard 2.2 and Bootstrap 3 I got it to work like this

var $copyButton = $('.clipboard');
var clip = new ZeroClipboard($copyButton);

clip
  .on('ready', function() {
    $('#global-zeroclipboard-html-bridge').attr({
      'data-toggle': 'tooltip',
      'data-title': 'Copy to clipboard...',
      'data-placement': 'right'
    });
    $('#global-zeroclipboard-html-bridge').tooltip({
      container: 'body',
      trigger: 'hover'
    });
  })
  .on('aftercopy', function() {
    $('#global-zeroclipboard-html-bridge').tooltip('hide');
});

Change the selector on line one.

the #global-zeroclipboard-html-bridge selector targets a div that is inserted by the Zero Clipboard component and that overlays the copy button.

score 0 · Answer 7 · answered Feb 20 '16 at 03:12

0

bug is a known issue and mentioned here: Zeroclipboard bug causing issue: see @ https://github.com/zeroclipboard/zeroclipboard/issues/369

answered Feb 20 '16 at 03:12

Sparrow 55

400
3
12

score -1 · Answer 8 · answered Jan 13 '14 at 18:32

Adding to @gnorsilva's answer. Here is how I set new text on the tooltip once it was copied successfully:

$(clip.htmlBridge).tooltip({
    title:     'copy to clipboard',
    placement: 'bottom'
});

clip.on('load', function(client) {
    client.on('complete', function() {
        $('.tooltip .tooltip-inner').text('copied!');
    });
});

This achieves the same effect as GitHub when you click one of their ZeroClipboard elements such as copy SHA or when you click the clone URL button

Bootstrap + Zeroclipboard = Tooltips can't be shown on hover?

8 Answers8