Add "click to copy" tooltip

author: Igor Tolmachev <me@igorek.dev> 2024-04-20 17:40:45 +0900
committer: Igor Tolmachev <me@igorek.dev> 2024-04-20 17:40:45 +0900
commit: 93b7de928e8ab59396fcd5ac263aed37afc5ec85 (patch)
tree: b04e4c7d8ec596e9a17297d9c63efce6c5e511ec
parent: 86d3bd0da5d45f1227ae182f9d87b1a4cc0bfa38 (diff)
download: pages-93b7de928e8ab59396fcd5ac263aed37afc5ec85.tar.gz
pages-93b7de928e8ab59396fcd5ac263aed37afc5ec85.zip
4 files changed, 57 insertions, 34 deletions
diff --git a/index.html b/index.html
index 2542722..a88fa21 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="style.css">
+    <script src="/script.js"></script>
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/style.css" />
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <title>igorek.dev</title>
  </head>
@@ -36,5 +36,4 @@
    <pre>󰍳    Minecraft servers <a href="/minecraft">https://igorek.dev/minecraft</a></pre>
    <pre>And more ...</pre>
  </body>
 </html>
diff --git a/minecraft/index.html b/minecraft/index.html
index 5a07615..1e082b9 100644
--- a/minecraft/index.html
+++ b/minecraft/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-  
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="/style.css">
+    <script src="/script.js"></script>
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/style.css" />
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <title>Minecraft server list</title>
  </head>
@@ -41,13 +41,12 @@
    <pre>
     Version: <a href="https://minecraft.wiki/w/Java_Edition_1.20.4">1.20.4</a>
     Map: <a href="https://mc.igorek.dev">https://mc.igorek.dev</a>
-     IP: <span class="copy" onclick='navigator.clipboard.writeText("mc.igorek.dev:25565")' >mc.igorek.dev:25565 [󰆏]</span>
+     IP: <span class="copy" copy-text="mc.igorek.dev:25565">mc.igorek.dev:25565</span>
     Recommended mods: <a href="https://modrinth.com/plugin/simple-voice-chat">Simple Voice Chat</a>
    </pre>
    <pre>
     Version: <a href="https://minecraft.wiki/w/Java_Edition_Beta_1.7.3">beta 1.7.3</a>
-     IP: <span class="copy" onclick='navigator.clipboard.writeText("mc.igorek.dev:25575")' >mc.igorek.dev:25575 [󰆏]</span>
+     IP: <span class="copy" copy-text="mc.igorek.dev:25575">mc.igorek.dev:25575</span>
    </pre>
  </body>
 </html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..b16142f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,18 @@
+function copy(text, tooltip) {
+  return () => {
+    navigator.clipboard.writeText(text);
+    tooltip.textContent = "[copied]";
+    setTimeout(() => (tooltip.textContent = "[click to copy]"), 1000);
+  };
+}
+window.onload = () => {
+  document.querySelectorAll(".copy").forEach((element) => {
+    const tooltip = document.createElement("span");
+    tooltip.classList.add("copy-tooltip");
+    tooltip.textContent = "[click to copy]";
+    element.onclick = copy(element.attributes["copy-text"]?.value, tooltip);
+    element.appendChild(tooltip);
+  });
+};
diff --git a/style.css b/style.css
index ceac6b3..b88584d 100644
--- a/style.css
+++ b/style.css
@@ -1,48 +1,55 @@
 @font-face {
-    font-family: Noto Sans Mono;
+  font-family: Noto Sans Mono;
-    src: url(font.ttf);
+  src: url(font.ttf);
 }
 * {
-    font-family: Noto Sans Mono;
+  font-family: Noto Sans Mono;
 }
 @media screen and (max-width: 700px) {
-    * {
+  * {
-        font-size: small;
+    font-size: small;
-    }
+  }
 }
 @media screen and (min-width: 700px) {
-    * {
+  * {
-        font-size: x-large;
+    font-size: x-large;
-    }
+  }
 }
 @media (prefers-color-scheme: dark) {
-    body {
+  body {
-        color: #a7a7a7;
+    color: #a7a7a7;
-        background: #1e1e1e;
+    background: #1e1e1e;
-    }
+  }
 }
 @media (prefers-color-scheme: light) {
-    body {
+  body {
-        color: #464b50;
+    color: #464b50;
-        background: #ffffff;
+    background: #ffffff;
-    }
+  }
 }
 a,
 .copy {
-    cursor: pointer;
+  cursor: pointer;
-    text-decoration: underline;
+  color: #7587a6;
-    color: #7587a6;
 }
 a:active,
 .copy:active {
-    cursor: pointer;
+  cursor: pointer;
-    text-decoration: underline;
+  color: #9b859d;
-    color: #9b859d;
+}
-}
-\ No newline at end of file
+.copy > .copy-tooltip {
+  visibility: hidden;
+  margin-left: 1em;
+}
+.copy:hover > .copy-tooltip {
+  visibility: visible;
+}
author	Igor Tolmachev <me@igorek.dev>	2024-04-20 17:40:45 +0900
committer	Igor Tolmachev <me@igorek.dev>	2024-04-20 17:40:45 +0900
commit	93b7de928e8ab59396fcd5ac263aed37afc5ec85 (patch)
tree	b04e4c7d8ec596e9a17297d9c63efce6c5e511ec
parent	86d3bd0da5d45f1227ae182f9d87b1a4cc0bfa38 (diff)
download	pages-93b7de928e8ab59396fcd5ac263aed37afc5ec85.tar.gz pages-93b7de928e8ab59396fcd5ac263aed37afc5ec85.zip

diff --git a/index.html b/index.html index 2542722..a88fa21 100644 --- a/index.html +++ b/index.html
@@ -1,13 +1,13 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
2	<html lang="en">	2	<html lang="en">
3
4	<head>	3	<head>
5	<meta charset="UTF-8" />	4	<meta charset="UTF-8" />
6	<meta http-equiv="X-UA-Compatible" content="IE=edge" />	5	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7	<meta name="viewport" content="width=device-width, initial-scale=1.0" />	6	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8		7
9	<link rel="stylesheet" href="style.css">	8	<script src="/script.js"></script>
10	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">	9	<link rel="stylesheet" href="/style.css" />
		10	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
11		11
12	<title>igorek.dev</title>	12	<title>igorek.dev</title>
13	</head>	13	</head>
@@ -36,5 +36,4 @@
36	<pre>󰍳 Minecraft servers <a href="/minecraft">https://igorek.dev/minecraft</a></pre>	36	<pre>󰍳 Minecraft servers <a href="/minecraft">https://igorek.dev/minecraft</a></pre>
37	<pre>And more ...</pre>	37	<pre>And more ...</pre>
38	</body>	38	</body>
39
40	</html>	39	</html>


diff --git a/minecraft/index.html b/minecraft/index.html index 5a07615..1e082b9 100644 --- a/minecraft/index.html +++ b/minecraft/index.html
@@ -1,13 +1,13 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
2	<html lang="en">	2	<html lang="en">
3
4	<head>	3	<head>
5	<meta charset="UTF-8" />	4	<meta charset="UTF-8" />
6	<meta http-equiv="X-UA-Compatible" content="IE=edge" />	5	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7	<meta name="viewport" content="width=device-width, initial-scale=1.0" />	6	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8		7
9	<link rel="stylesheet" href="/style.css">	8	<script src="/script.js"></script>
10	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">	9	<link rel="stylesheet" href="/style.css" />
		10	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
11		11
12	<title>Minecraft server list</title>	12	<title>Minecraft server list</title>
13	</head>	13	</head>
@@ -41,13 +41,12 @@
41	<pre>	41	<pre>
42	 Version: <a href="https://minecraft.wiki/w/Java_Edition_1.20.4">1.20.4</a>	42	 Version: <a href="https://minecraft.wiki/w/Java_Edition_1.20.4">1.20.4</a>
43	Map: <a href="https://mc.igorek.dev">https://mc.igorek.dev</a>	43	Map: <a href="https://mc.igorek.dev">https://mc.igorek.dev</a>
44	IP: <span class="copy" onclick='navigator.clipboard.writeText("mc.igorek.dev:25565")' >mc.igorek.dev:25565 [󰆏]</span>	44	IP: <span class="copy" copy-text="mc.igorek.dev:25565">mc.igorek.dev:25565</span>
45	Recommended mods: <a href="https://modrinth.com/plugin/simple-voice-chat">Simple Voice Chat</a>	45	Recommended mods: <a href="https://modrinth.com/plugin/simple-voice-chat">Simple Voice Chat</a>
46	</pre>	46	</pre>
47	<pre>	47	<pre>
48	 Version: <a href="https://minecraft.wiki/w/Java_Edition_Beta_1.7.3">beta 1.7.3</a>	48	 Version: <a href="https://minecraft.wiki/w/Java_Edition_Beta_1.7.3">beta 1.7.3</a>
49	IP: <span class="copy" onclick='navigator.clipboard.writeText("mc.igorek.dev:25575")' >mc.igorek.dev:25575 [󰆏]</span>	49	IP: <span class="copy" copy-text="mc.igorek.dev:25575">mc.igorek.dev:25575</span>
50	</pre>	50	</pre>
51	</body>	51	</body>
52
53	</html>	52	</html>


diff --git a/script.js b/script.js new file mode 100644 index 0000000..b16142f --- /dev/null +++ b/script.js
@@ -0,0 +1,18 @@
		1	function copy(text, tooltip) {
		2	return () => {
		3	navigator.clipboard.writeText(text);
		4	tooltip.textContent = "[copied]";
		5	setTimeout(() => (tooltip.textContent = "[click to copy]"), 1000);
		6	};
		7	}
		8
		9	window.onload = () => {
		10	document.querySelectorAll(".copy").forEach((element) => {
		11	const tooltip = document.createElement("span");
		12	tooltip.classList.add("copy-tooltip");
		13	tooltip.textContent = "[click to copy]";
		14
		15	element.onclick = copy(element.attributes["copy-text"]?.value, tooltip);
		16	element.appendChild(tooltip);
		17	});
		18	};


diff --git a/style.css b/style.css index ceac6b3..b88584d 100644 --- a/style.css +++ b/style.css
@@ -1,48 +1,55 @@
1	@font-face {	1	@font-face {
2	font-family: Noto Sans Mono;	2	font-family: Noto Sans Mono;
3	src: url(font.ttf);	3	src: url(font.ttf);
4	}	4	}
5		5
6	* {	6	* {
7	font-family: Noto Sans Mono;	7	font-family: Noto Sans Mono;
8	}	8	}
9		9
10	@media screen and (max-width: 700px) {	10	@media screen and (max-width: 700px) {
11	* {	11	* {
12	font-size: small;	12	font-size: small;
13	}	13	}
14	}	14	}
15		15
16	@media screen and (min-width: 700px) {	16	@media screen and (min-width: 700px) {
17	* {	17	* {
18	font-size: x-large;	18	font-size: x-large;
19	}	19	}
20	}	20	}
21		21
22	@media (prefers-color-scheme: dark) {	22	@media (prefers-color-scheme: dark) {
23	body {	23	body {
24	color: #a7a7a7;	24	color: #a7a7a7;
25	background: #1e1e1e;	25	background: #1e1e1e;
26	}	26	}
27	}	27	}
28		28
29	@media (prefers-color-scheme: light) {	29	@media (prefers-color-scheme: light) {
30	body {	30	body {
31	color: #464b50;	31	color: #464b50;
32	background: #ffffff;	32	background: #ffffff;
33	}	33	}
34	}	34	}
35		35
36	a,	36	a,
37	.copy {	37	.copy {
38	cursor: pointer;	38	cursor: pointer;
39	text-decoration: underline;	39	color: #7587a6;
40	color: #7587a6;
41	}	40	}
42		41
43	a:active,	42	a:active,
44	.copy:active {	43	.copy:active {
45	cursor: pointer;	44	cursor: pointer;
46	text-decoration: underline;	45	color: #9b859d;
47	color: #9b859d;	46	}
48	} \ No newline at end of file	47
		48	.copy > .copy-tooltip {
		49	visibility: hidden;
		50	margin-left: 1em;
		51	}
		52
		53	.copy:hover > .copy-tooltip {
		54	visibility: visible;
		55	}