1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6.tooltip {
7 position: relative;
8 display: inline-block;
9}
10
11.tooltip .tooltiptext {
12 visibility: hidden;
13 width: 140px;
14 background-color: #555;
15 color: #fff;
16 text-align: center;
17 border-radius: 6px;
18 padding: 5px;
19 position: absolute;
20 z-index: 1;
21 bottom: 150%;
22 left: 50%;
23 margin-left: -75px;
24 opacity: 0;
25 transition: opacity 0.3s;
26}
27
28.tooltip .tooltiptext::after {
29 content: "";
30 position: absolute;
31 top: 100%;
32 left: 50%;
33 margin-left: -5px;
34 border-width: 5px;
35 border-style: solid;
36 border-color: #555 transparent transparent transparent;
37}
38
39.tooltip:hover .tooltiptext {
40 visibility: visible;
41 opacity: 1;
42}
43</style>
44</head>
45<body>
46
47<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
48
49<input type="text" value="Hello World" id="myInput">
50
51<div class="tooltip">
52<button onclick="myFunction()" onmouseout="outFunc()">
53 <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
54 Copy text
55 </button>
56</div>
57
58<p>The document.execCommand() method is not supported in IE8 and earlier.</p>
59
60<script>
61function myFunction() {
62 var copyText = document.getElementById("myInput");
63 copyText.select();
64 copyText.setSelectionRange(0, 99999);
65 document.execCommand("copy");
66
67 var tooltip = document.getElementById("myTooltip");
68 tooltip.innerHTML = "Copied: " + copyText.value;
69}
70
71function outFunc() {
72 var tooltip = document.getElementById("myTooltip");
73 tooltip.innerHTML = "Copy to clipboard";
74}
75</script>
76
77</body>
78</html>
79
1<!DOCTYPE html>
2<html>
3 <head>
4 <script>
5 function paste() {
6 var pasteText = document.querySelector("#text");
7 pasteText.focus();
8 document.execCommand("paste");
9
10 pasteText.value = pasteText.value + pasteText.value;
11 }
12 </script>
13 </head>
14 <body>
15 <input id="text">
16 <button onclick="paste()">Paste</button>
17 </body>
1<script>
2function copyToClipboard(element) {
3 var $temp = $("<input>");
4 $("body").append($temp);
5 $temp.val($(element).text()).select();
6 document.execCommand("copy");
7 $temp.remove();
8}
9</script>
10
11<p id="text">Hello</p>
12<button onclick="copyToClipboard('#text')"></button>