Question

我正在尝试使用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); });

Answer 1

管理以非常简单的方式使其工作

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

Answer 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 创建一个容器，这是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');
});

Answer 3

如果您在 ZeroClipboard之后运行工具提示，它应该可以正常运行！

Answer 4

找到一个解决方法，通过单击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');
}

Answer 5

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

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

Answer 6

使用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为目标，并覆盖复制按钮。

Answer 7

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

Answer 8

添加到@ gnorsilva的答案。以下是成功复制后在工具提示中设置新文本的方法：

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

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

当您点击其中一个ZeroClipboard元素（例如GitHub或点击copy SHA按钮

时，此效果与clone URL相同

Bootstrap + Zeroclipboard =悬停时无法显示工具提示？

8 个答案: