trouble with ZeroClipboard of add a tooltip

Question

I'm trying to use Zeroclipboard http://code.google.com/p/zeroclipboard/ to copy stuff to the clipboard and add a tooltip when the mouse hover on the flash. but it doesn't seem to be working.

my html code:

<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>

My js code: i have added the jquery library.

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

Try changing `$('test')` to `$('.test')` since the *class* of the `div` is test. You are currently selecting elements with a *tag name* of `test` which you obviously don't have (you don't have `...` elements I guess). — pimvdb, May 08 '11 at 14:58
i change it to .test, the text can't be copied, when i delete $('test').style.display = 'block'; this line, it can copy. but i want to add a tooltip. thank you. — zhuanzhou, May 09 '11 at 00:39
i change the line to $('.test').css("display","block"); it's ok. but when i hover it again. it can't show the tooltip. — zhuanzhou, May 09 '11 at 01:02
Try to use class to control the tooltip's show and hide, then when your mouse over the trigger, add a class to the tooltip to keep it display. clip.glue(this); clip.addEventListener( 'mouseOver', function(client, text){ $(client.domElement).parents('li').addClass('on') }); — jiguang, Jan 08 '13 at 11:54

score 1 · Answer 1 · answered Jun 28 '11 at 16:28

Why do you want it to happen on mouseover? I'm not sure if ZeroClipboard supports that.

It took me a little while to figure this out when I first used ZeroClipboard because it's implementation is a bit different from normal. However, you can't just call clip.setText. You have to 'glue' the clip implementation to the control. And you can't use the jQuery object either, you have to glue it to the actual DOM object.

So, for example:

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

So now when you click the element, the text will be copied.I see where your doing some other stuff in your example, but regardless, I think the element your missing is gluing the DOM object to the instance of clip, rather than calling clip.setText on your jQuery mouseover event.

trouble with ZeroClipboard of add a tooltip

1 Answers1