CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapzeroclipboardzeroclipboard-1.x
Hopstream
Hopstream

Reputation: 6451

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

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);
});

Upvotes: 7

Views: 4855

Answers (8)

Sparrow 55
Sparrow 55

Reputation: 395

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

Upvotes: 0

Andrea Silvestri
Andrea Silvestri

Reputation: 1134

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

Upvotes: 1

ms007
ms007

Reputation: 4771

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.

Upvotes: 0

Ralf Hertsch
Ralf Hertsch

Reputation: 1287

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');
});

Upvotes: 2

Jared Eitnier
Jared Eitnier

Reputation: 7152

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

Upvotes: -1

gnorsilva
gnorsilva

Reputation: 640

Managed to get it working in a very simple way

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

Upvotes: 6

d3c0y
d3c0y

Reputation: 984

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');
  } );

Upvotes: 0

Hopstream
Hopstream

Reputation: 6451

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');
}

Upvotes: 0

Related Questions