ZeroClipboard 添加工具提示的问题答案

【问题标题】：trouble with ZeroClipboard of add a tooltipZeroClipboard 添加工具提示的问题
【发布时间】：2011-05-08 07:17:33
【问题描述】：

我正在尝试使用 Zeroclipboard http://code.google.com/p/zeroclipboard/ 将内容复制到剪贴板并在鼠标悬停在闪光灯上时添加工具提示。但它似乎不起作用。

我的html代码：

<div rel="<?php echo $url;?>" class="cp-code">copied code</div>
<div class="test" style="display: none; border: 1px solid #ccc; padding: 8px;">click copy,test,test</div>

我的 js 代码：我已经添加了 jquery 库。

ZeroClipboard.setMoviePath("http://example.com/js/ZeroClipboard.swf");
var clip = null;
var url = '';

function init() {
    clip = new ZeroClipboard.Client();
    clip.setHandCursor( true );

    $('.cp-code').mouseover( function() {
        clip.setText(this.innerHTML);
             $('test').style.display = 'block';
        if (clip.div) {
            clip.receiveEvent('mouseout', null);
            clip.reposition(this);
        } else {
                        clip.glue(this);
                }
        clip.receiveEvent('mouseover', null);
        url = $(this).attr('rel');
    });

    clip.addEventListener('mouseUp', function(client) {
        window.open(url);
    });
  clip.addEventListener('mouseOut', function (client) {
 $('test').style.display = 'none';
   });

    }

$(document).ready(function() {
    init();
});

【问题讨论】：

尝试将$('test') 更改为$('.test')，因为div 的类是测试。您当前正在选择 标签名称 为 test 的元素，而您显然没有（我猜您没有 <test>...</test> 元素）。
我把它改成.test，文本不能复制，当我删除$('test').style.display = 'block';这一行，它可以复制。但我想添加一个工具提示。谢谢。
我把这行改成 $('.test').css("display","block");没关系。但是当我再次悬停它时。它无法显示工具提示。
尝试用class来控制tooltip的显示和隐藏，然后当你的鼠标悬停在触发器上时，给tooltip添加一个class来保持它的显示。剪辑.胶水（这个）； clip.addEventListener('mouseOver', function(client, text){ $(client.domElement).parents('li').addClass('on') });

标签： javascript jquery zeroclipboard

【解决方案1】：

为什么你希望它在鼠标悬停时发生？我不确定 ZeroClipboard 是否支持。

当我第一次使用 ZeroClipboard 时，我花了一点时间才弄清楚这一点，因为它的实现与正常情况有些不同。但是，您不能只调用clip.setText。您必须将剪辑实现“粘合”到控件上。而且你也不能使用 jQuery 对象，你必须把它粘到实际的 DOM 对象上。

所以，例如：

var cpCode = $('.cp-code');
cpCode.each(function()
{
    clip = new ZeroClipboard.Client(); //you can set the movie path here too
    clip.glue($(this)[0]); // The [0] accesses the actual DOM object rather than the jQuery object
    clip.setText($(this).html();
});

所以现在当您单击元素时，文本将被复制。我看到您在示例中做了其他一些事情，但无论如何，我认为您缺少的元素是将 DOM 对象粘合到剪辑实例，而不是比在你的 jQuery 鼠标悬停事件上调用 clip.setText。

【讨论】：