Using Tooltipster with Clipboard.js #485

Closed
deronsizemore opened this Issue Nov 10, 2015 · 6 comments

Projects

None yet

2 participants

@deronsizemore

I'm using clipboard.js: https://zenorocha.github.io/clipboard.js/ to allow users to copy things to clipboard. I need to be able to display a tooltip that says "copied" once the user clicks. Would anyone be able to walk me through how to do this? If it's even possible at all?

The code I'm using:

var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});

I assume that I'd need to use this: $(...).tooltipster('show', callback); but I'm not sure if placing that inside the above code or if that will even work at all?

Any help would be greatly appreciated.

@louisameline
Collaborator
louisameline commented Nov 10, 2015 edited

Hello!

This is a good opportunity to use Tooltipster v4 and its new features. Test URL here.

In the html:

<input id="example_field_A" class="example_field" value="https://github.com/iamceege/tooltipster.git" />
<button id="example_button_A" class="example_button" data-clipboard-target="#example_field_A" data-copy="Copy to clipboard" data-copied="Copied!" data-copyerror="Error, please copy manually">
    <img src="doc/images/clippy.svg" alt="Copy to clipboard">
</button>

In the javascript:

$('.example_button').each(function(i, el){

    var $el = $(el),
        clipboard = new Clipboard(el),
        instance = $el
            .tooltipster({
                content: $el.attr('data-copy'),
                trigger: 'custom',
                triggerClose: {
                    mouseleave: true,
                    touchleave: true
                },
                triggerOpen: {
                    mouseenter: true,
                    touchstart: true
                }
            })
            .tooltipster('instance');

    clipboard
        .on('success', function(e) {
            instance
                .content($el.attr('data-copied'))
                .one('after', function(){
                    instance.content($el.attr('data-copy'));
                });
        })
        .on('error', function(e) {
            instance
                .content($el.attr('data-copyerror'))
                .one('after', function(){
                    instance.content($el.attr('data-copy'));
                });
        });
});
@deronsizemore

Thank you for the very quick response! I haven't been using Tooltipster long and what I have done, hasn't been real extensive. Could you tell me what's new in V4 compared to 3?

And thanks for the Fiddle. I played around with your fiddle and am still running into the problem which I outlined above although hopefully now that I have a Fiddle to show you, maybe it's more clear (sorry... I'm a javascript noob so bear with me). Here's my update from your original Fiddle: http://jsfiddle.net/07frhLrd/4/

If you click on "Link1" for example, it works fine and copies, but then if you hover over "LInk2" then it also says "Copied" as the tooltip even though it in fact wasn't copied. So it's like I need a way to reset tooltips once someone clicks?

Thanks again!

@louisameline
Collaborator

It would be too long to explain what's new (I'll do this soon in a dedicated post), but basically it works better in all kinds of way and adds lots of features for advanced users.

Your issue is that when you write .example_button, you're telling the Clipboard instance to work on all elements at the same time. So when an update happens on one of them, Clipboard calls the sucess callback on all elements and they all get their tooltips updated.

If clipboard was working the way it should, you could write just what I said and it would work : clipboard = new Clipboard(el). You can go on this page and give a +1 : zenorocha/clipboard.js#119

Until they fix it, just give an id to each button and write clipboard = new Clipboard('#' + $el.attr('id')). See http://jsfiddle.net/07frhLrd/5/

And you're welcome :)

@deronsizemore

Ah, gosh. I should have known that. I actually had it partly correct messing around on my end but was glossing over the fact that I needed the '#' in there to indicate to look at the unique id. Sorry for my ignorance there.

I went and +1'd the clipboard.js issue so hopefully they'll get that fixed, but this solution will work for me. I'm not picky as long as it works. ;)

Again, I can't thank you enough for responding. Not often you get responses this fast and this in depth. Really helps a lot.

@louisameline
Collaborator

I'm glad I could be of assistance !

I noticed that you removed the data-copyerror tag from the code but you shouldn't, that's the message displayed in the tooltip when Clipboard.js cannot do its job.

Good luck :)

@deronsizemore

Ok, thanks. I'll add that back definitely.

@louisameline louisameline changed the title from Tooltipster with clipboard.js? to Using Tooltipster with Clipboard.js Nov 10, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment