//气泡提示,仅css文件,不需要js文件
<link rel="stylesheet" href="css/tooltip.css" />
//复制内容,仅js文件,不需要css文件
<script src="js/clipboard.min.js"></script>
//全局变量用来存储弹出提示元素的默认样式
var showTipElemClass;
//第一个参数支持CSS选择器语法
var clipboard = new ClipboardJS('div[class^=pure-u-]', {
text: function(e) {
return e.innerText;
//return e.getAttribute('data-color');
}
// target: function(e) {
// var param = $(e).data("param");
// return document.querySelector('#copyTarget'); //复制标签文本
// //return document.querySelector('input'); 复制文本框的值
// }
});
//复制成功时提示
clipboard.on('success', function(e) {
showTooltip(e.trigger, '已复制');
});
//复制失败时提示
clipboard.on('error', function(e) {
showTooltip(e.trigger, '复制失败');
});
//关闭提示
function clearTooltip(e) {
//恢复提示元素的默认样式
e.currentTarget.setAttribute('class', showTipElemClass);
//移除弹窗样式
e.currentTarget.removeAttribute('aria-label');
}
//弹出提示内容
function showTooltip(elem, msg) {
var tagName=elem.tagName;
switch (tagName){
default:
showTipElemClass=elem.getAttribute('class');//获取当前元素的默认样式
elem.setAttribute('class', showTipElemClass+' tooltipped tooltipped-ne');//在默认样式上添加弹窗样式
break;
}
elem.setAttribute('aria-label', msg);
//弹出提示后添加鼠标离开时删除弹窗模式
elem.addEventListener('mouseleave', clearTooltip);
}