tooltip 提示复制效果代码
最近需要实现一个在一段文字上实现鼠标放上去选中文字，点击之后复制文字，同时 tooltip 提示“已复制”的效果。
下面是实现效果的动态截图：
实现效果在线演示：Tootip 选中文字复制效果
这是一个具体的实现代码：
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
margin-top: 10rem;
}
.tooltip .tooltiptext {
visibility: hidden;
min-width: 40px; /* 设置最小宽度为两个字的宽度 */
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s, transform 0.3s; /* 添加过渡效果 */
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
transform: translateX(-50%) translateY(-5px); /* 添加动画效果 */
}
::selection {
background-color: #add8e6; /* 设置选中文本的背景颜色为淡蓝色 */
color: #000; /* 设置选中文本的前景颜色为黑色 */
}
</style>
</head>
<body>
<div class="tooltip" onclick="copyText()" onmouseover="selectText()" onmouseout="resetTooltip()">
<span id="myText">这是要复制的文本</span>
<span class="tooltiptext" id="tooltipText">复制</span>
</div>
<script>
var tooltipText = document.getElementById("tooltipText");
function selectText() {
var textElement = document.getElementById("myText");
if (document.body.createTextRange) { // For IE
var range = document.body.createTextRange();
range.moveToElementText(textElement);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(textElement);
selection.removeAllRanges();
selection.addRange(range);
}
}
function copyText() {
var textToCopy = document.getElementById("myText").innerText;
navigator.clipboard.writeText(textToCopy)
.then(function() {
tooltipText.innerText = "已复制";
console.log("已复制到剪贴板");
})
.catch(function(error) {
console.error("复制失败:", error);
});
}
function resetTooltip() {
tooltipText.innerText = "复制";
}
</script>
</body>
</html>
这段代码创建了一个带有工具提示的文本，并为其添加了点击事件处理程序。当鼠标悬停在文本上方时，工具提示会显示“复制”，当单击文本时，使用navigator.clipboard.writeText()方法将文本复制到剪贴板。
需要注意的是：navigator.clipboard.writeText()方法需要在HTTPS协议下才能正常工作。如果你在本地的非加密环境中测试代码，可能会遇到安全限制。
selectText()函数，用于在鼠标悬停在文本上方时自动选中文本。
同时需要说明的是：自动选中文本的行为在不同的浏览器中可能会有所差异，特别是在移动设备上。此代码示例在大多数主流浏览器中可以正常工作，但可能无法在所有浏览器和设备上实现一致的效果。
resetTooltip()函数，并将其绑定到onmouseout事件。当鼠标移开文本时，这个函数会将工具提示的文本重置为"复制"。
这样，当第一次复制完成后，当鼠标再次悬停在文本上方时，工具提示会重新显示为"复制"，而不是"已复制"。
同时也增加了动画效果：通过为工具提示的CSS类添加过渡属性来创建淡入淡出的动画效果。我们为opacity和transform属性添加了过渡效果，以实现透明度和位置的平滑变化。
在鼠标悬停时，工具提示将逐渐显示出来，并且会向上移动5像素，给出动画效果。
这样就完成了一个鼠标在文字上面自动选择文字，同时点击文字，文字会被复制，同时 tooltip 给出提示。
以上就是完整代码，可以自己根据需求修改。
其它相关推荐：
1、chrome timing中的queueing代表什么？
2、CODEMIRROR 基本用法
3、nodejs+express搭建javascript在线IDE
4、nodejs+express搭建javascript在线IDE Ⅱ
5、在summernote中使用codemirror
评论列表