Javascript tooltip on click

Question

I'm trying to add a small popup tooltip to the following code to show that text was successfully copied to the clipboard when the element is clicked. I would like the tooltip to popup saying "Copied" on a click or touch in the case of mobiles for a second, then disappear untill another item is copied.

The code is as follows:

const tds = document.querySelectorAll("td");

tds.forEach(td => {
  td.onclick = function() {
    document.execCommand("copy");
  }

  td.addEventListener("copy", function(event) {
    event.preventDefault();
    if (event.clipboardData) {
      event.clipboardData.setData("text/plain", td.textContent);
      console.log(event.clipboardData.getData("text"))
    }
  });
})

<table><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table>

asking cus there is question like this https://stackoverflow.com/questions/37381640/tooltips-highlight-animation-with-clipboard-js-click — PedroAGSantos, Mar 30 '18 at 11:40

Kristianmitk · Accepted Answer · 2018-03-30T12:46:24.613

Here is an solution without using jQuery (I assume you dont use it since its not present in the code you showed us):

const tds = document.querySelectorAll("td");

tds.forEach(td => {
  td.onclick = function() {
    document.execCommand("copy");
    // ------- code added from here -------
    this.className = 'copied';
    var td = this;
    setTimeout(function() {
       td.className = '';
    }, 1000)
    // -------      up to here      -------
  }

  td.addEventListener("copy", function(event) {
    event.preventDefault();
    if (event.clipboardData) {
      event.clipboardData.setData("text/plain", td.textContent);
      console.log(event.clipboardData.getData("text"))
    }
  });
})

td.copied:after {
content: "copied";
background-color: red;
padding: 5px;
display: block;
position: absolute;
}

<table><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table>

When clicking on a td then for one second the copied class is added which has an :after pseudo-element that acts as your desired popup

Javascript tooltip on click

1 Answers1