diff --git a/README.md b/README.md index afbc294..ceb677f 100644 --- a/README.md +++ b/README.md @@ -76,8 +76,20 @@ git submodule add https://git.seemsleg.it/ef/cssjs-func-lib cssjs ``` - + +``` + +## Copy to Clipboard +``` + + + + +
+ + Kopieren +
``` \ No newline at end of file diff --git a/copy-to-clipboard.css b/copy-to-clipboard.css new file mode 100644 index 0000000..bdfb46e --- /dev/null +++ b/copy-to-clipboard.css @@ -0,0 +1,35 @@ +.copy-to-clipboard { + position: relative; + display: inline-block; +} + +.copy-to-clipboard .tooltiptext { + visibility: hidden; + width: 140px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px; + position: absolute; + z-index: 1; + bottom: 150%; + left: 50%; + margin-left: -75px; +} + +.copy-to-clipboard .tooltiptext::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; +} + +.copy-to-clipboard:hover .tooltiptext { + visibility: visible; + opacity: 1; +} \ No newline at end of file diff --git a/copy-to-clipboard.js b/copy-to-clipboard.js new file mode 100644 index 0000000..c7f80c6 --- /dev/null +++ b/copy-to-clipboard.js @@ -0,0 +1,20 @@ +function copyToClipboard() { + var copyText = document.getElementById("copy-to-clipboard"); + + /* Select the text field */ + copyText.select(); + copyText.setSelectionRange(0, 99999); /*For mobile devices*/ + + /* Copy the text inside the text field */ + document.execCommand("copy"); +} + +function copiedToClipboard() { + var tooltip = document.getElementById("copy-to-clipboard-tooltip"); + tooltip.innerHTML = "Kopiert"; +} + +function resetClipboard() { + var tooltip = document.getElementById("copy-to-clipboard-tooltip"); + tooltip.innerHTML = "Kopieren"; +} \ No newline at end of file