JSFiddle - React, Tailwind, and code Playground

by James Greene

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf"></script>
<div class="page">
<div class="page">
    <div class="clip_button" id="myClip" data-placement="bottom" title="Click to Copy">Copy To Clipboard</div>
    <div class="clip_button" id="myClip" data-placement="bottom" title="Click to Copy">Copy This Too!</div>
</div>
</div>

CSS

.clip_button {
        text-align: center;
        border: 1px solid black;
        background-color: #ccc;
        margin: 10px;
        padding: 10px;
      }

      .clip_button.zeroclipboard-is-hover { background-color: #eee; }
      .clip_button.zeroclipboard-is-active { background-color: #aaa; }
	  
	  .page {
		width: 75%;
		text-align: center;
		margin: 0 auto;
	  }

JavaScript

//Initiates ZeroClipboard
      var client = new ZeroClipboard( $('.clip_button') );
	  
	  ZeroClipboard.config( { swfPath: "ZeroClipboard.swf" } );

      client.on( 'ready', function(event) {
        // console.log( 'movie is loaded' );

        client.on( 'copy', function(event) {
          event.clipboardData.setData('text/plain', event.target.innerHTML);
        } );

      } );

      client.on( 'error', function(event) {
        // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
        ZeroClipboard.destroy();
      } ); 


	
//Allows tooltip
		$(function() {
		  var button = document.getElementById("myClip");
		  var client = new ZeroClipboard(button);
//		  $('#myClip').tooltip();
		  client.on('ready', function(event) {
            client.on('mouseover', function(event) {
              $(event.target).tooltip(); 
            });
			client.on('copy', function(event) {
			  event.clipboardData.setData('text/plain', event.target.innerHTML);
			});
			client.on('aftercopy', function(event) {
			  $('.tooltip .tooltip-inner').text('Copied!');
			});
		  });
		})