Copy To Clipboard On Click With Pseudo Element Tooltips

user_11684032 0
Viewed 945

I am attempting to make a tooltip created with a pseudo element clickable to then run a function to copy to clipboard.

I have already tried adding in onClick inside of the CSS pseudo-element as well as within the span as an onClick.

function myFunction() {
  var copyText = document.getElementById("firstnamereflect");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
[data-tooltip] {
  display: inline-block;
  position: relative;
  cursor: help;
  padding: 4px;
}


/* Tooltip styling */

[data-tooltip]:before {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  background: #000;
  color: #fff;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.4;
  min-width: 100px;
  text-align: center;
  border-radius: 4px;
}


/* Dynamic horizontal centering */

[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
  left: 50%;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

[data-tooltip-position="bottom"]:before {
  top: 100%;
  margin-top: 6px;
}


/* Tooltip arrow styling/placement */

[data-tooltip]:after {
  content: '';
  display: none;
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}


/* Dynamic horizontal centering for the tooltip */

[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
  left: 50%;
  margin-left: -6px;
}

[data-tooltip-position="top"]:after {
  bottom: 100%;
  border-width: 6px 6px 0;
  border-top-color: #000;
}

[data-tooltip-position="bottom"]:after {
  top: 100%;
  border-width: 0 6px 6px;
  border-bottom-color: #000;
}


/* Show the tooltip when hovering */

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  display: block;
  z-index: 50;
}
<div class="fixed">
  <span onclick="myFunction()" data-tooltip="Copy" data-tooltip-position="bottom" id="firstnamereflect"></span> </div>

I expect that when I click on the Copy tooltip created by data-tooltip that it will run a function.

pseudo-element clipboard copy css javascript
3 Answers

Here's how I'd do it. I think you can just attach an event handler to the tool tip itself. Once the display is none, it'll not render to the user so nothing would happen if the user clicks in the space.

JS Code:

// attach an event handler that'll show the tooltip 
document.querySelector("#hoverText").onmouseover = () => {
  document.querySelector("#toolTip").style.display = "inline-block";
}

// attach an event handler that'll hide the tooltip 
document.querySelector("#hoverText").onmouseout = () => {
  document.querySelector("#toolTip").style.display = "none";
}

// attach the copy function
document.querySelector("#toolTip").onclick = copyToClipboard;
user_116836370

I have modified your script and made it work. copyText.select(); only work with text boxes like input, textarea etc. You can retrieve the value from a div/span using range

Change your function to

function myFunction() {
  var copyText = document.getElementById("firstnamereflect").firstChild;
  var range = document.createRange();
  var endOffset = copyText.length;
  range.setStart(copyText, 0);
  range.setEnd(copyText, endOffset);
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  alert("Copied the text: " + range);
}


function myFunction() {
  var copyText = document.getElementById("firstnamereflect").firstChild;
  var range = document.createRange();
  var endOffset = copyText.length;
  range.setStart(copyText, 0);
  range.setEnd(copyText, endOffset);
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  alert("Copied the text: " + range);
}
[data-tooltip] {
  display: inline-block;
  position: relative;
  cursor: help;
  padding: 4px;
}


/* Tooltip styling */

[data-tooltip]:before {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  background: #000;
  color: #fff;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.4;
  min-width: 100px;
  text-align: center;
  border-radius: 4px;
}


/* Dynamic horizontal centering */

[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
  left: 50%;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

[data-tooltip-position="bottom"]:before {
  top: 100%;
  margin-top: 6px;
}


/* Tooltip arrow styling/placement */

[data-tooltip]:after {
  content: '';
  display: none;
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}


/* Dynamic horizontal centering for the tooltip */

[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
  left: 50%;
  margin-left: -6px;
}

[data-tooltip-position="top"]:after {
  bottom: 100%;
  border-width: 6px 6px 0;
  border-top-color: #000;
}

[data-tooltip-position="bottom"]:after {
  top: 100%;
  border-width: 0 6px 6px;
  border-bottom-color: #000;
}


/* Show the tooltip when hovering */

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  display: block;
  z-index: 50;
}
<div class="fixed">
  <span onclick="myFunction()" data-tooltip="Copy" data-tooltip-position="bottom" id="firstnamereflect">Hover Me</span>
</div>

user_49474340

Thank you, Jinu! This worked perfectly once I changed the alert to the document.execCommand("copy"); string. Now I just need to dissect it so I can understand what you did!

function myFunction() {
  var copyText = document.getElementById("firstnamereflect").firstChild;
  var range = document.createRange();
  var endOffset = copyText.length;
  range.setStart(copyText, 0);
  range.setEnd(copyText, endOffset);
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  alert("Copied the text: " + range);
}
[data-tooltip] {
  display: inline-block;
  position: relative;
  cursor: help;
  padding: 4px;
}


/* Tooltip styling */

[data-tooltip]:before {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  background: #000;
  color: #fff;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.4;
  min-width: 100px;
  text-align: center;
  border-radius: 4px;
}


/* Dynamic horizontal centering */

[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
  left: 50%;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

[data-tooltip-position="bottom"]:before {
  top: 100%;
  margin-top: 6px;
}


/* Tooltip arrow styling/placement */

[data-tooltip]:after {
  content: '';
  display: none;
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}


/* Dynamic horizontal centering for the tooltip */

[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
  left: 50%;
  margin-left: -6px;
}

[data-tooltip-position="top"]:after {
  bottom: 100%;
  border-width: 6px 6px 0;
  border-top-color: #000;
}

[data-tooltip-position="bottom"]:after {
  top: 100%;
  border-width: 0 6px 6px;
  border-bottom-color: #000;
}


/* Show the tooltip when hovering */

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  display: block;
  z-index: 50;
}
<div class="fixed">
  <span onclick="myFunction()" data-tooltip="Copy" data-tooltip-position="bottom" id="firstnamereflect">Hover Me</span>
</div>

user_116840320
Related