Geek Answers Handbook

Bootstrap + Zeroclipboard = hints cannot be displayed on hover?

I am trying to use ZeroClipboard for the "Click to copy" function on an element and at the same time show a tooltip.

Unfortunately, the tooltip does not work if I use ZeroClipboard for an item . 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); });
+7
source share
8 answers

Managed to get it working in a very simple way

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

Sometimes it's hard to collect all the fragments and 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 creates a container with the identifier 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'); });
+2
source

If you run Tooltip after ZeroClipboard, it will work without problems!

+1
source

A workaround was found by placing the tooltip in a click for Bootstrap, but then using the hooks in ZeroClipboard to show and hide it on 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'); }
0
source

An old question, but I recently ran into this problem and was able to find a solution, it's quite simple, but a little blanket. Since the flash element positions itself with zindex 10000 on top of any element that you have on the page, you will need to add a flash element with a selector and a name. This can be done using ZeroClipboard callbacks.

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

With Zero Clipboard 2.2 and Bootstrap 3, I got this 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 in the first line.

The #global-zeroclipboard-html-bridge selector targets a div, which is inserted by the Zero Clipboard component and overlaid the copy button.

0
source

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

0
source

Adding to @gnorsilva's answer. This is how I installed the new text in the tooltip as soon as 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 is achieved by the same effect as GitHub when you click one of your ZeroClipboard items, such as copy SHA , or when you click the clone URL button

-one
source

More articles:


All Articles