diff --git a/src/css/main.css b/src/css/main.css
index 4e69d6c77..f0219d9c0 100644
--- 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
index 6d62e299b..e799c7db0 100644
--- 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
index 70db65ab8..aaef5416c 100644
--- 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
index 20c89b7af..6e800621f 100644
--- 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
index 28083f744..d717b8b4a 100644
--- 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>