浮层 poshytip.js样例 和 jquery复制span的内容到剪切板

1. 引入js和样式

<link rel="stylesheet" type="text/css" href="css/demo/overview.css">
  <script type="text/javascript" src="js/libs/poshytip.js"></script>

2.js代码

floatDiv=function(){
        $('.trigger').poshytip({
            followCursor: true,
            alignX: 'center',
            alignY: 'top',
            showTimeout: 200,
            className: 'float-tips',
            showOn: 'hover',
            alignTo: 'target',
            content: function() {

                let name = $(this).data('name');
                let number = $(this).data('number');
                return '<div class="float-tips__cont">\n' +
                    '                        <div class="float-tips__cont-info">\n' +
                    '                            <p>名称：<span class="float-tips__data" id="copydata1">'+name+'</span></p>\n' +
                    '                            <p>编号：<span class="float-tips__data" id="copydata2">'+number+'</span></p>\n' +
                    '                        </div>\n' +
                    '                        <div class="float-tips__cont-op">\n' +
                    '                            <a class="float-tips__copy icon icon-copy" id="copytip1" title="复制" οnclick="copy(1);"  data-clipboard-text="'+name+'" href="javascript:;"></a>\n' +
                    '                            <a class="float-tips__copy icon icon-copy" id="copytip2" title="复制" οnclick="copy(2);" data-clipboard-text="'+number+'" href="javascript:;"></a>\n' +
                    '                        </div>\n' +
                    '                    </div>';
            },
            offsetY: 5
        });
    }

copy=function (copydata) {
        if(copydata==1){
            var cont = $("#copydata1").text();
        }else{
            var cont = $("#copydata2").text();
        }
        var flag = copyText(cont);
        alert(flag ? "复制成功!" : "复制失败!");
    };

    //赋值到剪切板
    copyText = function (cont)  {
        var textarea = document.createElement("input");//创建input对象
        var currentFocus = document.activeElement;//当前获得焦点的元素
        document.body.appendChild(textarea);//添加元素
        textarea.value = cont;
        textarea.focus();
        if(textarea.setSelectionRange)
            textarea.setSelectionRange(0, textarea.value.length);//获取光标起始位置到结束位置
        else
            textarea.select();
        try {
            var flag = document.execCommand("copy");//执行复制
        } catch(eo) {
            var flag = false;
        }
        document.body.removeChild(textarea);//删除元素
        currentFocus.focus();
        return flag;
    }

3.html 代码

鼠标焦点移到span上显示浮层

<span class="trigger" data-name="张三" data-number="001">张三（001）</span>