Click Email Item in Header – Copy to Clipboard

#1. Use this code to Custom CSS box

.mailto-link {
  position: relative;
  padding: 8px 0;
}

.mailto-message {
  top: 1px;
  left: 50%;
  margin-bottom: -5px;
  transform: translate(-50%, -100%);
  position: absolute;
  display: none;
  width: auto;
  white-space: nowrap;
  font-size: 12px;
  background-color: black;
  color: white;
  padding: 2px 6px;
  border-radius: 2px;
}
.mailto-message:after, .mailto-message:before {
  content: "";
}
.mailto-message:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(0, 0, 0, 0);
  border-top-color: #000000;
  border-width: 4px;
  margin-left: -4px;
}

.mailto-link:hover .mailto-message,
.mailto-link:focus .mailto-message,
.mailto-link:focus-within .mailto-message {
  display: block;
}

#2. Use this code to Code Injection – Footer (or Markdown Block in Footer if the plan doesn’t support Code Injection)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    
    // Add class to mailto link
    // Needed to separate the disabling of the default action AND copy email to clipboard
    $('a[href^=mailto]').addClass('mailto-link');

    var mailto = $('.mailto-link');
    var messageCopy = 'Click to copy email';
    var messageSuccess = 'Copied';
    
    mailto.append('<span class="mailto-message"></span>');
    $('.mailto-message').append(messageCopy);
    
    // Disable opening your email client. yuk.
    $('a[href^=mailto]').click(function() {
        return false; 
    })
    
    // On click, get href and remove 'mailto:' from value
    // Store email address in a variable.
    mailto.click(function() {
        var href = $(this).attr('href');
        var email = href.replace('mailto:', '');
        copyToClipboard(email);
        $('.mailto-message').empty().append(messageSuccess);
        setTimeout(function() {
            $('.mailto-message').empty().append(messageCopy);}, 2000); 
    });
    
});

// Grabbed this from Stack Overflow.
// Copies the email variable to clipboard
function copyToClipboard(text) {
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    dummy.setAttribute('value', text);
    dummy.select();
    document.execCommand('copy');
    document.body.removeChild(dummy);
}
</script>

#3. Add an email item to the Navigation

#4. Result

When hover the Email item:

When click the Email item