copy to clipboard

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
function copyToClipboard(element) {
var $temp = $("<textarea>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>

<style>
#format {
background: #fff2f4;
border-radius: 0.35rem;
padding: 0.5rem;
font-size: 0.75rem;
line-height: 1.25;
margin: 0.5rem 0 0 0;
}
#format mark:hover {
background: #fff7f9;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 3.4rem;
background-color: #ffd1dc;
color: #393939;
text-align: center;
border-radius: 0.35rem;
padding: 0.15rem;
position: absolute;
z-index: 1;
top: 150%;
right: -4%;
opacity: 0;
transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -0.3rem;
border-width: 0.3rem;
border-style: solid;
border-color: transparent transparent #ffd1dc transparent;
}

.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>

<div id="format">
<span onclick="clicksound.playclip()">
<p align="right" class="tooltip" id="myTooltip" onclick="copyToClipboard('#form-box')">
<mark>️️ ️️️️️️️copy️️ ️️️️️️️</mark>
<span class="tooltiptext"> copied!</span>
</p>
</span>

<p id="form-box" align="left">
text
</p>
</div>