New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Tooltipster with Clipboard.js #485

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

Comments

Projects
None yet
3 participants
@deronsizemore

deronsizemore commented Nov 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@louisameline

louisameline Nov 10, 2015

Collaborator

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

louisameline commented Nov 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@deronsizemore

deronsizemore Nov 10, 2015

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!

deronsizemore commented Nov 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@louisameline

louisameline Nov 10, 2015

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

Collaborator

louisameline commented Nov 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@deronsizemore

deronsizemore Nov 10, 2015

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.

deronsizemore commented Nov 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@louisameline

louisameline Nov 10, 2015

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

Collaborator

louisameline commented Nov 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@deronsizemore

deronsizemore Nov 10, 2015

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

deronsizemore commented Nov 10, 2015

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

@azzimuth

This comment has been minimized.

Show comment
Hide comment
@azzimuth

azzimuth Jan 2, 2018

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.

azzimuth commented Jan 2, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment