<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js' type='text/javascript'></script>

​

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>

​

<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js' type='text/javascript'></script>

​

<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>

​

<br /><br />

<button class="btn btn-primary" data-clipboard-target="#page1">Click me</button>

<div id="page1">Nội dung này sẽ được copy vào clipboard khi click vào button</div>

​

​

<script type='text/javascript'>

    $(function() { new Clipboard('.btn-primary'); });

    $('.btn-primary').tooltip({

        trigger: 'click',

        placement: 'right'

    });

​

    function setTooltip(message) {

        $('.btn-primary').tooltip('hide')

            .attr('data-original-title', message)

            .tooltip('show');

    }

​

    function hideTooltip() {

        setTimeout(function() {

            $('.btn-primary').tooltip('hide');

        }, 1000);

    }

​

    var clipboard = new Clipboard('.btn-primary');

​

    clipboard.on('success', function(e) {

        setTooltip('Copied');

        hideTooltip();

    });

​

    clipboard.on('error', function(e) {

        setTooltip('Failed');