Javascript 自举&x2B；Zeroclipboard=工具提示可以'；悬停时不显示？

我试图在元素上使用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);
});

---

找到了一种解决方法，将要显示的工具提示放在单击以进行引导上，然后在悬停时使用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');
}

---

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

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

---

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

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

---

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

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

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

---

当您单击其中一个零剪贴板元素（如

copy SHA

）或单击

clone URL

按钮时，这与

GitHub

实现的效果相同。有时，很难将所有代码片段整合在一起并正常工作。。。这是一个使用ZeroClipboard 1.3.2和Bootstrap 3.1.0的完整解决方案：

HTML:

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

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

---

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

更改第一行上的选择器

---

#全局zeroclipboard html桥接器

选择器以由Zero Clipboard组件插入并覆盖“复制”按钮的div为目标。

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

bug是一个已知的问题，这里也提到了：Zeroclipboard bug导致问题：请参见@

zclip将在元素上方放置一个SWF对象，因此它显然不会从工具提示使用的zclip下方的元素触发

mouseenter

处理程序。我已经有一段时间没有使用zclip了，但是也许一个实际的例子可以帮助找到解决方法。呃，在他们的开发页面上，zclip声称保留

mouseenter

和

mouseleave

事件。。也许试着使用jQuery版本的zclip？does对我来说显然不起作用（可能是因为它已经3年了）。