ClipboardJS with Tooltip v2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Clipboard with tooltip</title>
</head>

<body>
    <br>
    <pre><copy>// Vùng chứa code 1
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
</copy></pre>
    <pre><copy>// Vùng chứa code 2
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
</copy></pre>
    <pre><copy>// Vùng chứa code 3
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
</copy></pre>
    <pre><copy>// Vùng chứa code 4
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
</copy></pre>
    <pre><copy>// Vùng chứa code 5
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
</copy></pre>
    <pre><copy>// Vùng chứa code 6
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
</copy></pre>
    
    <style type="text/css">
    .codeHeader {
        background-color: #f5f5f5;
        border: 1px solid #e0e0e0;
        border-bottom: 0;
        text-align: right;
        padding: 6px 0;
    }

.copy-text {
        font-size: 14px;
        cursor: pointer;
        color: #707070;
        padding: 7px 10px;
        border-left: 1px solid #e0e0e0
    }

.copy-text:before {
        font-family: "font awesome 5 free";
        content: "\f24d";
        display: inline-block;
        margin-right: 7px
    }

.copy-text:hover {
        color: #707070;
        background: #ccc
    }

pre copy {
        display: block;
        background: #f9f9f9;
        max-height: 400px;
        font-size: 14px;
        color: black;
        text-align: left;
        overflow: auto;
        border: 1px solid #d3d6db;
        margin: auto;
        padding: 16px;
        line-height: 21px;
    }
    /* Tooltip 3.3.7 */

.tooltip {
        position: absolute;
        z-index: 1030;
        display: block;
        font-size: 12px;
        line-height: 1.4;
        opacity: 0;
        filter: alpha(opacity=0);
        visibility: visible
    }

.tooltip.in {
        opacity: .9;
        filter: alpha(opacity=90)
    }

.tooltip.top {
        padding: 5px 0;
        margin-top: -3px
    }

.tooltip.right {
        padding: 0 5px;
        margin-left: 3px
    }

.tooltip.bottom {
        padding: 5px 0;
        margin-top: 3px
    }

.tooltip.left {
        padding: 0 5px;
        margin-left: -3px
    }

.tooltip-inner {
        max-width: 200px;
        padding: 3px 8px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        background-color: #000;
        border-radius: 4px
    }

.tooltip-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid
    }

.tooltip.top .tooltip-arrow {
        bottom: 0;
        left: 50%;
        margin-left: -5px;
        border-top-color: #000;
        border-width: 5px 5px 0
    }

.tooltip.top-left .tooltip-arrow {
        bottom: 0;
        left: 5px;
        border-top-color: #000;
        border-width: 5px 5px 0
    }

.tooltip.top-right .tooltip-arrow {
        right: 5px;
        bottom: 0;
        border-top-color: #000;
        border-width: 5px 5px 0
    }

.tooltip.right .tooltip-arrow {
        top: 50%;
        left: 0;
        margin-top: -5px;
        border-right-color: #000;
        border-width: 5px 5px 5px 0
    }

.tooltip.left .tooltip-arrow {
        top: 50%;
        right: 0;
        margin-top: -5px;
        border-left-color: #000;
        border-width: 5px 0 5px 5px
    }

.tooltip.bottom .tooltip-arrow {
        top: 0;
        left: 50%;
        margin-left: -5px;
        border-bottom-color: #000;
        border-width: 0 5px 5px
    }

.tooltip.bottom-left .tooltip-arrow {
        top: 0;
        left: 5px;
        border-bottom-color: #000;
        border-width: 0 5px 5px
    }

.tooltip.bottom-right .tooltip-arrow {
        top: 0;
        right: 5px;
        border-bottom-color: #000;
        border-width: 0 5px 5px
    }
    </style>
    <link href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' rel='stylesheet' type='text/css' />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js'></script>
    <script src='https://cdn.rawgit.com/components/bootstrap/3/js/tooltip.js'></script>
    <script>
    jQuery(document).ready(function($) {
        jQuery("pre copy").before("<div class='codeHeader'><a class='copy-text' data-clipboard-target='pre copy' data-clipboard-action='copy'>Copy</a></div>");
        $('.copy-text').tooltip({
            trigger: 'click'
        })
    });

var clipboard = new ClipboardJS(".copy-text", {
        target: function(trigger) {
            return trigger.parentNode.nextElementSibling
        }
    });

function setTooltip(btn, message) {
        $(btn).tooltip('hide')
            .attr('data-original-title', message)
            .tooltip('show');
    }

function hideTooltip(btn) {
        setTimeout(function() {
            $(btn).tooltip('hide');
        }, 500);
    }

clipboard.on('success', function(e) {
        var btn = $(e.trigger);
        setTooltip(btn, 'Copied');
        hideTooltip(btn);
    });

clipboard.on('error', function(e) {
        var btn = $(e.trigger);
        setTooltip('Failed');
        hideTooltip(btn);
    });
    </script>
</body>

</html>