JSFiddle - React, Tailwind, and code Playground

by Nam CuPeo

HTML

<div class="ndcopy">
Transaction through service of 123itvn (http://bit.ly/exchange-USD-123itvn)<br/>
*** Customer information<br/>
- Full name : Họ tên đầy đủ của bạn (không dấu)<br/>
- Paypal Email : Địa chỉ email của tài khoản paypal<br/>
</div>
<div style="text-align:center;">
<button class="nutcopy" data-clipboard-target=".ndcopy">
Copy
</button>
</div>

CSS

.nutcopy {background: #DC143C; color:#fff; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer;}

JavaScript

<script type='text/javascript'>
    $(function() { new Clipboard('.nutcopy'); });
    $('.nutcopy').tooltip({
        trigger: 'click',
        placement: 'right'
    });
    function setTooltip(message) {
        $('.nutcopy').tooltip('hide')
            .attr('data-original-title', message)
            .tooltip('show');
    }
    function hideTooltip() {
        setTimeout(function() {
            $('.nutcopy').tooltip('hide');
        }, 3000);
    }
    var clipboard = new Clipboard('.nutcopy');
    clipboard.on('success', function(e) {
        setTooltip('Đã xong 😆');
        hideTooltip();
    });
    clipboard.on('error', function(e) {
        setTooltip('Failed');
        hideTooltip();
    });
</script>