Tooltips + Highlight Animation With Clipboard.js Click

by

Seems like all you want to do is integrating Clipboard.js with a Tooltip solution.

So here’s how you can accomplish that using Bootstrap’s Tooltip.

// Tooltip

$('button').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);
}

// Clipboard

var clipboard = new Clipboard('button');

clipboard.on('success', function(e) {
  setTooltip(e.trigger, 'Copied!');
  hideTooltip(e.trigger);
});

clipboard.on('error', function(e) {
  setTooltip(e.trigger, 'Failed!');
  hideTooltip(e.trigger);
});
<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="It worked!">Click me</button>
<button class="btn btn-primary" data-clipboard-text="It worked again!">Click me</button>

More Related Contents:

  1. Resizing an image in an HTML5 canvas
  2. Difference between dates in JavaScript
  3. How to group by and sum an array of objects? [duplicate]
  4. In HTML5, is the localStorage object isolated per page/domain?
  5. Spread Syntax ES6
  6. Difference between window.location.href=window.location.href and window.location.reload()
  7. Set Webkit Keyframes Values Using Javascript Variable
  8. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  9. How to prevent an HTTP request just for a favicon?
  10. Eval is evil… So what should I use instead?
  11. Accessing Shadow DOM tree with Selenium
  12. Async function without await in JavaScript
  13. Why IE 11 display blank page rendering react app
  14. How to build minified and uncompressed bundle with webpack?
  15. How to disable button in React.js
  16. Angular 2 – Check if image url is valid or broken
  17. Google Apps Script toast messages don’t appear for anonymous editors
  18. window.open target _self v window.location.href?
  19. how can I override console.log() and prepend a word at the beginning of the output?
  20. What is “?:” notation in JavaScript?
  21. How do you create custom asynchronous functions in node.js?
  22. Can I apply the required attribute to fields in HTML?
  23. chart.js load totally new data
  24. JavaScript Math.random Normal distribution (Gaussian bell curve)?
  25. HTML5 drag and drop folder detection in firefox. Is it even possible?
  26. Adding click event for a button created dynamically using jQuery [duplicate]
  27. Get HTTP Body of Form in JavaScript
  28. How to programmatically calculate the contrast ratio between two colors?
  29. How to detect iPad and iPad OS version in iOS 13 and Up?
  30. How to understand JS realms

Leave a Comment