我试图使使用伪元素创建的工具提示可单击,然后运行一个功能以复制到剪贴板。
我已经尝试过在CSS伪元素内部以及跨度内将onClick添加为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>
我希望当我单击由data-tooltip创建的“复制”工具提示时,它将运行一个功能。
答案 0 :(得分:0)
这就是我要做的。我认为您可以将事件处理程序附加到工具提示本身。一旦不显示任何内容,就不会呈现给用户,因此,如果用户单击该空间,则不会发生任何事情。
JS代码:
// 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;
答案 1 :(得分:0)
我修改了您的脚本并使之运行。 copyText.select();
仅适用于文本框,例如输入,文本区域等。您可以使用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);
}
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>
答案 2 :(得分:0)
谢谢你,基努!一旦我将警报更改为document.execCommand(“ copy”);,此方法就可以很好地工作。串。现在我只需要剖析它,这样我就可以了解您的所作所为!
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>