mcollinssc

I’d still love to see this functionality offered by a plugin, but for posterity I was able to figure out a clunky workaround.

Here’s the code that I insert as HTML (in Elementor):

<input type = "text" value="***INSERT TEXT TO BE COPIED HERE***" id="myInput" style="position:absolute;  left:-9999px">

<div class="tooltip">
<img src="***SVG PATH & FILENAME GOES HERE***" onclick="myFunction()" onmouseout="outFunc()" width="25">
  <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>

</div>

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("copy");

  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied: " + copyText.value;
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}
</script>

I don’t know how to code, so I cobbled this together from things I could find online. Surely there is a more elegant way to invisibly set a value than having an input box and hiding it?

My use case was something like this “Password: SuPeRsEcReT” <SVG copy button>. I have to manually change the value of password in the input. It doesn’t pick it up from the text. Not elegant, but workable.

FWIW

• This reply was modified 4 years ago by mcollinssc.

@haweho Thanks for the tip. That tool could be helpful for this and future projects.

@michielve The whole background calendar.