myungseokang/clip.html

## clip.html
<html>
  <head>
    <title>Clipboard.js demo</title>
    <style>
    .tooltipped {
        position: relative
    }
    .tooltipped:after {
        position: absolute;
        z-index: 1000000;
        display: none;
        padding: 5px 8px;
        font: normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
        color: #fff;
        text-align: center;
        text-decoration: none;
        text-shadow: none;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: break-word;
        white-space: pre;
        pointer-events: none;
        content: attr(aria-label);
        background: rgba(0,0,0,0.8);
        border-radius: 3px;
        -webkit-font-smoothing: subpixel-antialiased
      }

      .tooltipped:before {
        position: absolute;
        z-index: 1000001;
        display: none;
        width: 0;
        height: 0;
        color: rgba(0,0,0,0.8);
        pointer-events: none;
        content: "";
        border: 5px solid transparent
    }

    .tooltipped:hover:before,.tooltipped:hover:after,.tooltipped:active:before,.tooltipped:active:after,.tooltipped:focus:before,.tooltipped:focus:after {
        display: inline-block;
        text-decoration: none
    }

    .tooltipped-s:after {
        top: 100%;
        right: 50%;
        margin-top: 5px
    }

    .tooltipped-s:before {
        top: auto;
        right: 50%;
        bottom: -5px;
        margin-right: -5px;
        border-bottom-color: rgba(0,0,0,0.8)
    }

    .tooltipped-s:after {
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%)
    }
    </style>
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
  </head>
  <body>
    <button class="btn" data-clipboard-text="Hello Clipboard" aria-label="Copied!">
      Copy
    </button>
  </body>
  <script>
    var clipboard = new Clipboard('.btn');

    var btns = document.querySelectorAll('.btn');
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener('mouseleave', function(e) {
            e.currentTarget.setAttribute('class', 'btn');
            e.currentTarget.removeAttribute('aria-label');
        });
    }
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        showTooltip(e.trigger,'Copied!');
        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        showTooltip(e.trigger,fallbackMessage(e.action));
    });
    function showTooltip(elem, msg) {
        elem.setAttribute('class', 'btn tooltipped tooltipped-s');
        elem.setAttribute('aria-label', msg);
    }
    function fallbackMessage(action) {
        var actionMsg = '';
        var actionKey = (action === 'cut' ? 'X' : 'C');
        if (/iPhone|iPad/i.test(navigator.userAgent)) {
            actionMsg = 'No support :(';
        } else if (/Mac/i.test(navigator.userAgent)) {
            actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
        } else {
            actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
        }
        return actionMsg;
    }
  </script>
</html>
	<html>
	<head>
	<title>Clipboard.js demo</title>
	<style>
	.tooltipped {
	position: relative
	}
	.tooltipped:after {
	position: absolute;
	z-index: 1000000;
	display: none;
	padding: 5px 8px;
	font: normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: break-word;
	white-space: pre;
	pointer-events: none;
	content: attr(aria-label);
	background: rgba(0,0,0,0.8);
	border-radius: 3px;
	-webkit-font-smoothing: subpixel-antialiased
	}

	.tooltipped:before {
	position: absolute;
	z-index: 1000001;
	display: none;
	width: 0;
	height: 0;
	color: rgba(0,0,0,0.8);
	pointer-events: none;
	content: "";
	border: 5px solid transparent
	}

	.tooltipped:hover:before,.tooltipped:hover:after,.tooltipped:active:before,.tooltipped:active:after,.tooltipped:focus:before,.tooltipped:focus:after {
	display: inline-block;
	text-decoration: none
	}

	.tooltipped-s:after {
	top: 100%;
	right: 50%;
	margin-top: 5px
	}

	.tooltipped-s:before {
	top: auto;
	right: 50%;
	bottom: -5px;
	margin-right: -5px;
	border-bottom-color: rgba(0,0,0,0.8)
	}

	.tooltipped-s:after {
	-webkit-transform: translateX(50%);
	-ms-transform: translateX(50%);
	transform: translateX(50%)
	}
	</style>
	<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
	</head>
	<body>
	<button class="btn" data-clipboard-text="Hello Clipboard" aria-label="Copied!">
	Copy
	</button>
	</body>
	<script>
	var clipboard = new Clipboard('.btn');

	var btns = document.querySelectorAll('.btn');
	for (var i = 0; i < btns.length; i++) {
	btns[i].addEventListener('mouseleave', function(e) {
	e.currentTarget.setAttribute('class', 'btn');
	e.currentTarget.removeAttribute('aria-label');
	});
	}
	clipboard.on('success', function(e) {
	console.info('Action:', e.action);
	console.info('Text:', e.text);
	console.info('Trigger:', e.trigger);
	showTooltip(e.trigger,'Copied!');
	e.clearSelection();
	});

	clipboard.on('error', function(e) {
	console.error('Action:', e.action);
	console.error('Trigger:', e.trigger);
	showTooltip(e.trigger,fallbackMessage(e.action));
	});
	function showTooltip(elem, msg) {
	elem.setAttribute('class', 'btn tooltipped tooltipped-s');
	elem.setAttribute('aria-label', msg);
	}
	function fallbackMessage(action) {
	var actionMsg = '';
	var actionKey = (action === 'cut' ? 'X' : 'C');
	if (/iPhone\|iPad/i.test(navigator.userAgent)) {
	actionMsg = 'No support :(';
	} else if (/Mac/i.test(navigator.userAgent)) {
	actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
	} else {
	actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
	}
	return actionMsg;
	}
	</script>
	</html>