I am creating a page with ~50 lines where single click on a line will copy that line. And there's a tooltip for copy (on hover) & copied (on click).
Using the below code, I am able to copy each line with single click. And the copy tooltip also shows up on hover. But the "copied" tooltip is working only for first line. It's not working for the rest because of same id & I cannot give each line a different id.
How to solve this using same ID or class name?
var copy = document.querySelectorAll(".copy");
for (const copied of copy) {
copied.onclick = function () {
document.execCommand("copy");
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Copied!";
};
copied.onmouseover = function () {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Copy";
};
copied.addEventListener("copy", function (event) {
event.preventDefault();
if (event.clipboardData) {
event.clipboardData.setData("text/plain", copied.textContent);
console.log(event.clipboardData.getData("text"));
}
});
} .tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
background: red;
color: #fff;
text-align: center;
padding: 3px 3px;
border-radius: 15px;
position: absolute;
z-index: 1;
bottom: 90%;
left: 75%;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.copy {
cursor: pointer;
}<html>
<body style="text-align: center;">
<br>
<br>
<div class="tooltip">
<p class="copy">Copy this 1st line.</p>
<span class="tooltiptext" id="myTooltip">Copy</span>
</div>
<br>
<div class="tooltip">
<p class="copy">Copy this 2nd line.</p>
<span class="tooltiptext" id="myTooltip">Copy</span>
</div>
<br>
<div class="tooltip">
<p class="copy">Copy this 3rd line.</p>
<span class="tooltiptext" id="myTooltip">Copy</span>
</div>
<br>
<div class="tooltip">
<p class="copy">Copy this 4th line.</p>
<span class="tooltiptext" id="myTooltip">Copy</span>
</div>
</body>
</html>