<h1>Copy email address to clipboard</h1>
<h2>This snippet copies the email address from a <code>mailto:</code> link to your clipboard on click instead of opening your email app.</h2>
<p>Try it out here: <a href="mailto:email@gmail.com">email@gmail.com</a>.</p>
<p>Paste it here to test: <input type="text"></p>

.mailto-wrapper {
	position: relative;
}
.mailto-message {
	top: 0;
	left: 50%;
	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;
	&:after {
		content: '';
	}
}
.mailto-wrapper:hover .mailto-message {
	display: block;
}

// not necessary for snippet
body {
	padding: 3em;
	line-height: 1.5;
}
h2 {
	font-weight: 400;
}

$(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]").wrap('<span class="mailto-wrapper">');
	$("a[href^=mailto]").addClass("mailto-link");

	var mailto = $(".mailto-link");
	var mailtoWrapper = $(".mailto-wrapper");
	var messageCopy = "Click to copy email address.";
	var messageSuccess = "Email address copied to clipboard.";

	mailtoWrapper.append('<span class="mailto-message"></span>');
	$(".mailto-message").append(messageCopy);

	// Disable default action (opening your email client. yuk.)
	$("a[href^=mailto]").click(function() {
		return false;
	});

	// On click, get href and remove 'mailto:'
	// 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);
}