-
Notifications
You must be signed in to change notification settings - Fork 480
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
Comments
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'));
});
});
}); |
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! |
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 If clipboard was working the way it should, you could write just what I said and it would work : Until they fix it, just give an id to each button and write And you're welcome :) |
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 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. |
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 :) |
Ok, thanks. I'll add that back definitely. |
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. |
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? |
I get this error on using the recommended code: Uncaught TypeError: Illegal constructor. |
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:
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.
The text was updated successfully, but these errors were encountered: