clickToCopy.css

.copySuccess,
.copyError {
  width: 300px;
  height: 75px;
  display: none;

  padding: 0;
  margin: auto;

  position: fixed;
  top: 25%;
  right: 0;
  left: 0;

  line-height: 70px;
  text-align: center;

  color: white;

	z-index: 9999;

  font-family: 'HelveticaNeueLight', 'Helvetica', Arial, sans-serif;
  font-size: 14px;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.copySuccess { background-color: #9add3b; }
.copyError { background-color: #dd493b; }

clickToCopy.js

var copyBtn = document.querySelector('.clicktoCopy');
    copyBtn.addEventListener('click', function(event) {

      var emailLink = document.querySelector('.clicktoCopy');
      var range = document.createRange();

      range.selectNode(emailLink);
      window.getSelection().addRange(range);

      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copy command was ' + msg);
        $(".copySuccess").fadeIn( 150 ).delay( 1500 ).fadeOut( 200 );
      } catch(err) {
        console.log('Oops, unable to copy');
        $(".copyError").fadeIn( 150 ).delay( 1500 ).fadeOut( 200 );
      }

      window.getSelection().removeAllRanges();
    });

copyToClick.html

<span class="clickCopy">AIzaSyBkkHxHW91kshha5FMddGQa9I-XivKWpQIAIzaSyBkkHxHW91kshha5FMddGQa9I-XivKWpQIAIzaSyBkkHxHW91kshha5FMddGQa9I-XivKWpQI</span>

<div class="copySuccess">Success!</div>
<div class="copyError">Error!</div>