7

我正在尝试将 ZeroClipboard 用于元素上的“单击复制”功能，同时显示引导工具提示。

不幸的是，如果我在元素上使用 ZeroClipboard，则工具提示不起作用。任何帮助将不胜感激...

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

8 回答 8

6

设法让它以一种非常简单的方式工作

var zero = new ZeroClipboard($el);
$(zero.htmlBridge).tooltip({title: "copy to clipboard", placement: 'bottom'});
于 2013-07-01T15:26:17.433 回答
2

有时很难将所有片段放在一起并工作......这是使用 ZeroClipboard 1.3.2 和 Bootstrap 3.1.0 的完整解决方案：

HTML：

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

ZeroClipboard 创建一个 ID 为global-zeroclipboard-html-bridge的容器，这是引导工具提示的访问点。

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');
});
于 2014-02-22T09:49:47.473 回答
1

如果您在ZeroClipboard之后运行 Tooltip，它应该可以正常工作！

于 2015-06-29T10:27:51.543 回答
0

使用 Zero Clipboard 2.2 和 Bootstrap 3 我让它像这样工作

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

更改第一行的选择器。

选择器的#global-zeroclipboard-html-bridge目标是由零剪贴板组件插入并覆盖复制按钮的 div。

于 2015-03-30T12:57:25.150 回答
0

老问题，但我最近遇到了这个问题并且能够找到解决方案，它相当简单但有点笼统。因为 flash 元素以 10000 的 zindex 定位在页面上的任何元素之上，所以您必须在 flash 元素后面附加选择器和标题。这可以通过 ZeroClipboard 回调来完成。

  clip.on( 'load', function(client) {
      $('#global-zeroclipboard-html-bridge').attr('rel', 'tooltip').attr('title', 'Click Here To Copy URL');
  } );
于 2013-05-28T00:35:47.007 回答
0

找到了一种解决方法，方法是将工具提示放在单击 Bootstrap 时显示，然后使用 ZeroClipboard 中的钩子在悬停时显示和隐藏它。

这是我的做法：

$('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');
}
于 2012-12-18T18:32:43.480 回答
0

错误是一个已知问题，并在此处提到：Zeroclipboard 导致问题的错误：请参阅 @ https://github.com/zeroclipboard/zeroclipboard/issues/369

于 2016-02-20T03:12:57.463 回答
-1

添加到@gnorsilva 的答案。这是成功复制工具提示后我如何在工具提示上设置新文本的方法：

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

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

GitHub这与单击它们的 ZeroClipboard 元素之一（例如copy SHA单击clone URL按钮）时达到相同的效果

于 2014-01-13T18:32:27.877 回答