Improve appearance of click-to-copy confirmation message (#579)

smogon · Oct 6, 2023 · 81a9ea7 · 81a9ea7
1 parent 06c7409
commit 81a9ea7
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 11 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -180,21 +180,32 @@ th {
     font-weight: bold;
     font-size: 1.1em;
     margin: 0.5em 0;
+    position: relative;
 }
 .big-text #mainResult:hover {  /* indicates the presence of click-to-copy function */
     cursor: pointer;
     opacity: 0.7;
 }
 #tooltipText {
+    position: absolute;
+    left: 42%;
+    top: -170%;
     font-size: 0.8em;
     visibility: hidden;
     border-radius: 5px;
-    width: 120px;
-    background-color: black;
+    background-color: rgba(0, 0, 0, 0.7);
     color: white;
     text-align: center;
     padding: 5px;
-    margin-left: 10px;
+    font-weight: normal;
+}
+#tooltipText::after {
+    position: absolute;
+    left: 45%;
+    top: 100%;
+    content: '';
+    border: 6px solid transparent;
+    border-top-color: rgba(0, 0, 0, 0.7);
 }
 .small-text {
     font-size: 0.8em;

diff --git a/src/index.template.html b/src/index.template.html
@@ -132,9 +132,9 @@
         </div>
     </div>
     <div aria-label="Calculation results" class="main-result-group" role="region">
-        <div class="big-text" title="Click to copy.">
-            <span id="mainResult">Loading...</span>
-            <span id="tooltipText">Copied</span>
+        <div class="big-text">
+            <span id="mainResult" title="Click to copy.">Loading...</span>
+            <div id="tooltipText">Copied</div>
         </div>
         <div class="small-text"><span id="damageValues">(If you see this message for more than a few seconds, try enabling JavaScript.)</span>
         </div>

diff --git a/src/js/index_randoms_controls.js b/src/js/index_randoms_controls.js
@@ -205,6 +205,6 @@ $("#mainResult").click(function () {
 		document.getElementById('tooltipText').style.visibility = 'visible';
 		setTimeout(function () {
 			document.getElementById('tooltipText').style.visibility = 'hidden';
-		}, 2000);
+		}, 1500);
 	});
 });
diff --git a/src/js/shared_controls.js b/src/js/shared_controls.js
@@ -1525,6 +1525,6 @@ $("#mainResult").click(function () {
 		document.getElementById('tooltipText').style.visibility = 'visible';
 		setTimeout(function () {
 			document.getElementById('tooltipText').style.visibility = 'hidden';
-		}, 2000);
+		}, 1500);
 	});
 });
diff --git a/src/randoms.template.html b/src/randoms.template.html
@@ -132,9 +132,9 @@
         </div>
     </div>
     <div aria-label="Calculation results" class="main-result-group" role="region">
-        <div class="big-text" title="Click to copy.">
-            <span id="mainResult">Loading...</span>
-            <span id="tooltipText">Copied</span>
+        <div class="big-text">
+            <span id="mainResult" title="Click to copy.">Loading...</span>
+            <div id="tooltipText">Copied</div>
         </div>
         <div class="small-text"><span id="damageValues">(If you see this message for more than a few seconds, try enabling JavaScript.)</span>
         </div>