JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.1/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
I like big butts <a id="copy_1" data-clipboard-text="and I cannot lie 1" class="copy-link" data-toggle="tooltip"  title="Copy to clipboard" href="#">copy link</a><br/>
I like big butts <a id="copy_2" data-clipboard-text="and I cannot lie 2" class="copy-link" data-toggle="tooltip"  title="Copy to clipboard" href="#">copy link</a><br/>
I like big butts <a id="copy_3" data-clipboard-text="and I cannot lie 3" class="copy-link" data-toggle="tooltip" title="Copy to clipboard" href="#">copy link</a><br/>
I like big butts <a id="copy_4" data-clipboard-text="and I cannot lie 4" class="copy-link" data-toggle="tooltip" title="Copy to clipboard" href="#">copy link</a><br/>
I like big butts <a id="copy_5" data-clipboard-text="and I cannot lie 5" class="copy-link" data-toggle="tooltip" title="Copy to clipboard" href="#">copy link</a><br/>

JavaScript

var clipboard = new ClipboardJS('.copy-link');

$('.copy-link').tooltip({
  trigger: 'click',
  placement: 'bottom'
});


function setTooltip(btn, message) {
  $(btn).tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}

function hideTooltip(e) {
  setTimeout(function() {
    $(btn).tooltip('hide');
  }, 1000);
}

clipboard.on('success', function(e) {
  //e.target.hide();
  //console.log(e);
  setTooltip('Copied!');
  hideTooltip();
});

clipboard.on('error', function(e) {
  //e.target.hide();
  setTooltip('Failed!');
  hideTooltip();
});