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://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
I like big butts <button id="copy_1" data-clipboard-text="and I cannot lie 1" class="btn-copy" data-toggle="tooltip"  title="Copy to clipboard" href="#">copy link</button><br/>
I like big butts <button id="copy_2" data-clipboard-text="and I cannot lie 2" class="btn-copy" data-toggle="tooltip"  title="Copy to clipboard" href="#">copy link</button><br/>
I like big butts <button id="copy_3" data-clipboard-text="and I cannot lie 3" class="btn-copy" data-toggle="tooltip" title="Copy to clipboard" href="#">copy link</button><br/>
I like big butts <button id="copy_4" data-clipboard-text="and I cannot lie 4" class="btn-copy" data-toggle="tooltip" title="Copy to clipboard" href="#">copy link</button><br/>
I like big butts <button id="copy_5" data-clipboard-text="and I cannot lie 5" class="btn-copy" data-toggle="tooltip" title="Copy to clipboard" href="#">copy link</button><br/>

JavaScript

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

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

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

// clipboard new class
var clipboard = new ClipboardJS('.btn-copy');

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

// clipboard error copied
clipboard.on('error', function(e) {
  e.clearSelection();
  setTooltip(e.trigger, 'Failed!');
  hideTooltip(e.trigger);
});