JSFiddle - React, Tailwind, and code Playground

by teewelk

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>constructor-nodelist</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 1. Define some markup -->
    <button data-clipboard-text="1">Copy</button>
    <button data-clipboard-text="2">Copy</button>
    <button data-clipboard-text="3">Copy</button>

    <!-- 2. Include library -->
<script src="https://unpkg.com/[email protected]/dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard by passing a list of HTML elements -->
    <script>
    var btns = document.querySelectorAll('button');
    var clipboard = new ClipboardJS(btns);
    clipboard.on('success', function(e) {
        console.log(e);
        
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

JavaScript

var clipboardDemos=new 
ClipboardJS('[data-clipboard-demo]');
clipboardDemos.on('success',function(e){e.clearSelection();
console.info('Action:',e.action);
console.info('Text:',e.text);
console.info('Trigger:',e.trigger);
showTooltip(e.trigger,'Copied!');});
clipboardDemos.on('error',function(e){
console.error('Action:',e.action);
console.error('Trigger:',e.trigger);
showTooltip(e.trigger,fallbackMessage(e.action));

});