Possible to add inline copy icon?

+1 on this request

I’d love to see inline functionality with SVG as well.

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.

It’s nice feature. I have just released plugin by adding a short code support to copy the text.

E.g.

[copy]12345[/copy]

Now this shortcode show the link with text “Copy”.

And on click on it the number copied to clipboard.

We can change the link with button as:

[copy tag=”button”]12345[/copy]

But in your case you want the logo instead of the copy link/button.

I’ll add a option in the shortcode to use the SVG icon to copy the content.