[Blogger] Tạo button copy text to clipboard có Tooltips cho blogspot

Ở bài viết trước tôi đã giới thiệu tới các bạn 1 khung chứa code có nút copy to clipboard tiện lợi gọn nhẹ không cần flash hoặc frameworks. Và ở bài viết này chúng ta sẽ thêm được tooltips sau sự kiện người dùng nhấn chuột vào nút copy

Thực ra với nhiều người thì nó không cần thiết mấy, tuy nhiên khi có thêm tooltips người dùng sẽ biết được kết quả của việc click vào nút copy sẽ như nào đồng thời cũng tăng tính chuyên nghiệp cho blog của bạn

Bạn có thể test demo bằng cách click chuột vào đây Copy

Hoặc xem demo
 DEMO
Ok thấy thích rồi phải không, bắt tay vào làm nhé ! Do tiện ích clipboard.js không hỗ trợ tooltips nên bạn cần đến bootstrap để hiển thị nó.

Trước tiên hãy đăng nhập vào trang quản trị blog và chỉnh sửa HTML.

B1. Bạn kiểm tra xem trong blog mình đã có jquery, bootstrap js, bootstrap css, clipboard js hay chưa, nếu chưa có file nào thì nhúng file đó vào, đặt link nhúng trước thẻ</head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js' type='text/javascript'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>

B2. Tiếp theo dán đoạn code sau trước thẻ đóng </body>

<script type='text/javascript'>
    //<![CDATA[
    $(function() { new Clipboard('.btn-primary'); });
    $('.btn-primary').tooltip({
        trigger: 'click',
        placement: 'top'
    });

    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');
        hideTooltip();
    });
    // ]]>
</script>

B3. Như vậy khi có bài viết cần nút copy, bạn chỉ cần dùng button sau

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

Thay data-clipboard-target="#page1" bằng id hoặc class khung chứa nội dung cần copy. Bạn lưu ý đoạn js ở bước 2 và class của button ở bước 3 (.btn-primary) phải trùng nhau, nếu blog của bạn đã tồn tại class đó, hãy thay bằng tên khác tránh xung đột.

Nội dung setTooltip('Copied'); hoặc setTooltip('Failed'); bạn có thể thay đổi tùy thích

Nội dung placement: 'top' có thể thay thành {left, right, bottom} để định vị trí hiển thị của tooltips

Cập nhật: Từ phiên bản 2.0.0 bạn cần thay phần new Clipboard("...") thành new ClipboardJS("...") để gọi đúng hàm nhé

Chúc bạn thành công !