Tooltip Copied Example

by Michael Barros

HTML

<div class="copy-emoji-section">
  <div>
    <p class="emoji-copy-text" id="">Copy Emoji</p>
    <p class="emoji-copy" id="emoji_copy">😀</p>
    <button class="emoji-copy-button" id="emoji_copy_button">Copy Emoji</button>
  </div>
  <div class="your-tooltip">Copied!</div>
</div>

<div class="tooltip fade bottom in" style="top: 34px; left: 11.3359px; display: block;">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">Copied!</div>
</div>

CSS

.copy-emoji-section {
  position: relative;
}

.your-tooltip {
  opacity: 0;
  position: absolute;
  bottom:0;
  transition: all .3s;
  display: none;
}
 
.your-tooltip.show {
  opacity: 1;
  display: block;
}

/* Tooltip */

.tooltip.bottom {
    padding: 5px 0;
    margin-top: 3px;
}

.tooltip.in {
    opacity: .9;
    filter: alpha(opacity=90);
}

.fade.in {
    opacity: 1;
}

.tooltip {
    position: absolute;
    z-index: 1030;
    display: block;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: visible;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

JavaScript

console.clear();

var copyEmailBtn = document.querySelector('.emoji-copy-button');
    var yourToolTip = document.querySelector('.your-tooltip');

    copyEmailBtn.addEventListener('click', function(event) {  
      // Select the email link anchor text  
      var emailLink = document.querySelector('.emoji-copy');  
      var range = document.createRange();  
      range.selectNode(emailLink);  
      window.getSelection().addRange(range);  
  
      try {  
        // Now that we've selected the anchor text, execute the copy command  
        var successful = document.execCommand('copy');  
        var msg = successful ? 'successful' : 'unsuccessful';

        // Add the .show class when successful.
        // if(successful){
          yourToolTip.classList.add('show');
        // }
    
        console.log('Copy email command was ' + msg);  
      } catch(err) {  
        console.log('Oops, unable to copy');  
      }  
  
      // Remove the selections - NOTE: Should use
      // removeRange(range) when it is supported  
      window.getSelection().removeAllRanges();  
  });
  
 console.log('Reloaded');