大漠孤烟

导航

JS复制并气泡提示

//气泡提示,仅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);
}

 

posted on 2025-09-20 16:46  jnmcok  阅读(11)  评论(0)    收藏  举报