Menu
I'm using clipboard.js to copy some text from a textarea, and that's working fine, but I want to show a tooltip saying "Copied!" if it was successfully copied like they do in the example given on their website.
Here's an example of it working without showing a tooltip: https://jsfiddle.net/5j50jnhj/
319
You will have to create a tooltip using HTML/CSS, bootstrap has a built in one. Then you can hide/show it depending on success/failure of the copying.
Usage. Via data attributes − To add a tooltip, add data-toggle = "tooltip" to an anchor tag. The title of the anchor will be the text of a tooltip. By default, tooltip is set to top by the plugin.
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
Under Action you have: Type, Bookmark, and Tooltip which is usually blank (the default CTRL-Click...). Put your tooltip into the tooltip box and it will show when you hover over the button. 10-05-2019 02:26 PM
Put your tooltip into the tooltip box and it will show when you hover over the button. 10-05-2019 02:26 PM It works like a charm, thank you so much for the tip!
We are going to learn how to create a tooltip and how to position the tooltip at different positions. Step 1: Include all the bootstrap libraries in the head section of your code. Step 2: To implement the tooltip in the button control of HTML, apply data-toggle property as shown below:
One can set a position to that tool tipped text by using CSS, which helps us to define some style and position to our tooltip. Using a tooltip to our WebPages is helps us do more interaction with the user because it gives short information of included elements. HTML uses a method that defines tooltip by using the link with a title attribute.
Clipboard.js creator here. So Clipboard.js is not opinionated about user feedback which means it doesn't come with a tooltip solution.
But here's an example of how you can integrate it with Bootstrap's Tooltip.
// Tooltip $('button').tooltip({ trigger: 'click', placement: 'bottom' }); function setTooltip(message) { $('button').tooltip('hide') .attr('data-original-title', message) .tooltip('show'); } function hideTooltip() { setTimeout(function() { $('button').tooltip('hide'); }, 1000); } // Clipboard var clipboard = new Clipboard('button'); clipboard.on('success', function(e) { setTooltip('Copied!'); hideTooltip(); }); clipboard.on('error', function(e) { setTooltip('Failed!'); hideTooltip(); });<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <button class="btn btn-primary" data-clipboard-text="1">Click me</button>I do it like it
HTML :
<button class="test" data-clipboard-text="1">Button 1</button> <button class="test" data-clipboard-text="1">Button 2</button> JS :
$('.test').tooltip({ trigger: 'click', placement: 'bottom' }); function setTooltip(btn, message) { btn.tooltip('hide') .attr('data-original-title', message) .tooltip('show'); } function hideTooltip(btn) { setTimeout(function() { btn.tooltip('hide'); }, 1000); } var clipboard = new Clipboard('.test'); clipboard.on('success', function(e) { var btn = $(e.trigger); setTooltip(btn, 'Copied'); hideTooltip(btn); }); With jsfiddle link https://jsfiddle.net/hs48sego/1/
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
