<h1>とんかつ</h1>

<table>
  <tr>
    <th>カロリー</th>
    <td class="copy-value" data-clipboard-text="303kcal">303kcal</td>
  </tr>
  <tr>
    <th>たんぱく質</th>
    <td class="copy-value" data-clipboard-text="19.6g">19.6g</td>
  </tr>
  <tr>
    <th>脂質</th>
    <td class="copy-value" data-clipboard-text="19.7g">19.7g</td>
  </tr>
  <tr>
    <th>炭水化物</th>
    <td class="copy-value" data-clipboard-text="11.6g">11.6g</td>
  </tr>
  <tr>
    <th>糖質</th>
    <td class="copy-value" data-clipboard-text="10.9g">10.9g</td>
  </tr>
  <tr>
    <th>食物繊維</th>
    <td class="copy-value" data-clipboard-text="0.7g">0.7g</td>
  </tr>
</table>

h1 {
  text-align: center;
}
table {
  width: 80vw;
  margin: 30px auto 0;
  border-collapse: collapse;
}
th {
  font-weight: normal;
  width: 40%;
  background: #eee;
}
th, td {
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}
.copy-value {
  cursor: pointer;
  position: relative;
}
.copy-value:hover {
  background: #f2fafc;
}

/* Tooltip */
.tooltip::after {
	content: 'Copied!';
	background: #555;
	display: inline-block;
	color: #fff;
	border-radius: .4rem;
	position: absolute;
	left: 50%;
	bottom: -.8rem;
	transform: translate(-50%, 0);
	font-size: .75rem;
	padding: 4px 10px 6px 10px;
	animation: fade-tooltip .5s 1s 1 forwards;
}

/* Animation */
@keyframes fade-tooltip {
  to { opacity: 0; }
}

const clipboard = new ClipboardJS('.copy-value');

// Select all .copy-value items
const btns = document.querySelectorAll('.copy-value');

// Remove .tooptip class by mouseout
for(let i=0;i<btns.length;i++){
    btns[i].addEventListener('mouseleave',clearTooltip);
}
function clearTooltip(e){
    e.currentTarget.setAttribute('class','copy-value');
}

// Add .tooltip class when it's clicked
function showTooltip(elem){
    elem.setAttribute('class','copy-value tooltip');
}

clipboard.on('success', function(e) {
    showTooltip(e.trigger);
});