JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<div class="panel panel-default">
  <div class="panel-body">
    <p>
      USERNAME : <a href="#" title="Copy" class="btn-copy" data-clipboard-text="foo">foo</a>
      <br /> 
      PASSWORD : <a href="#" title="Copy" class="btn-copy" data-clipboard-text="bar">bar</a>
    </p>
  </div>
</div>

JavaScript

$(".btn-copy").tooltip({
  placement: 'right'
});

clipboard.on('success', function(e) {
  e.clearSelection();
  e.trigger.tooltip({ title: 'Copied'	});
});

clipboard.on('error', function(e) {
  console.log(e);
});