Using Tooltipster with Clipboard.js

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

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]

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]

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.

[azzimuth]

I'm trying to use the Tooltipster + Clipboard.js combination for the opposite, i.e. I added a button to the tooltip and I want that the text in the tooltip is copied when I click on the button. But it doesn't work. Please see this fiddle. I'd approciate any help.

[kapooramit]

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

Hi!

I am trying this and it is not working. Firefox throws error. It seems passing el is causing the issue. What can I do to make this work?

[kapooramit]

I get this error on using the recommended code:

Uncaught TypeError: Illegal constructor.