added tooltop to captcha text, and changed tooltop location from right to bottom

Author: joshwallerr

popup.js

@@ -922,7 +922,7 @@ function initPopup() {
           if (blockPatterns.some(pattern => pattern.test(domainSummaries[termType]))) {
             let warningDiv = document.createElement('div');
             let warning = document.createElement('p');
-            warning.textContent = "Note: This summary may have failed due to the website's use of CAPTCHAs. We're working on a solution for this.";
+            warning.innerHTML = `Note: This summary may have failed due to the website's use of CAPTCHAs. <span class="tooltip"><span id="captchaexplainer-${termType.toLowerCase().replace(/[^a-z0-9]/g, '-')}">We're working on a solution for this.</span><span class="tooltiptext">In the meantime, we'll manually summarise this policy. Check back tomorrow to see it.</span></span>`;
             warningDiv.className = "mb-4 -mt-2 p-4 bg-yellow-100 border-yellow-500";
             warning.className = "m-0";
             warningDiv.appendChild(warning);

production.css

@@ -2640,31 +2640,32 @@ button:hover {
 }
 
 .tooltip .tooltiptext {
-    visibility: hidden;
-    width: 150px;
-    background-color: black;
-    opacity: 0.85;
-    color: white;
-    text-align: left;
-    border-radius: 6px;
-    padding: 5px 7px;
-    position: absolute;
-    z-index: 1;
-    top: -5px;
-    left: 120%;
-    border: 1px solid black;
-    font-family: Arial, Helvetica, sans-serif !important;
+  visibility: hidden;
+  width: 150px;
+  background-color: black;
+  opacity: 0.85;
+  color: white;
+  text-align: left;
+  border-radius: 6px;
+  padding: 5px 7px;
+  position: absolute;
+  z-index: 1;
+  top: 150%; /* tooltip appears below the text */
+  left: 50%; /* center the tooltip */
+  transform: translateX(-50%); /* ensure the tooltip is centered */
+  border: 1px solid black;
+  font-family: Arial, Helvetica, sans-serif !important;
 }
 
 .tooltip .tooltiptext::after {
-    content: "";
-    position: absolute;
-    top: 10%;
-    right: 100%;
-    margin-top: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent black transparent transparent;
+  content: "";
+  position: absolute;
+  bottom: 100%; /* arrow is at the top of the tooltip box */
+  left: 50%; /* center the arrow */
+  transform: translateX(-50%); /* ensure the arrow is centered */
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent black transparent;
 }
 
 .tooltip:hover .tooltiptext {

styles.css

@@ -167,31 +167,32 @@ button:hover {
 }
 
 .tooltip .tooltiptext {
-    visibility: hidden;
-    width: 150px;
-    background-color: black;
-    opacity: 0.85;
-    color: white;
-    text-align: left;
-    border-radius: 6px;
-    padding: 5px 7px;
-    position: absolute;
-    z-index: 1;
-    top: -5px;
-    left: 120%;
-    border: 1px solid black;
-    font-family: Arial, Helvetica, sans-serif !important;
+  visibility: hidden;
+  width: 150px;
+  background-color: black;
+  opacity: 0.85;
+  color: white;
+  text-align: left;
+  border-radius: 6px;
+  padding: 5px 7px;
+  position: absolute;
+  z-index: 1;
+  top: 150%; /* tooltip appears below the text */
+  left: 50%; /* center the tooltip */
+  transform: translateX(-50%); /* ensure the tooltip is centered */
+  border: 1px solid black;
+  font-family: Arial, Helvetica, sans-serif !important;
 }
 
 .tooltip .tooltiptext::after {
-    content: "";
-    position: absolute;
-    top: 10%;
-    right: 100%;
-    margin-top: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent black transparent transparent;
+  content: "";
+  position: absolute;
+  bottom: 100%; /* arrow is at the top of the tooltip box */
+  left: 50%; /* center the arrow */
+  transform: translateX(-50%); /* ensure the arrow is centered */
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent black transparent;
 }
 
 .tooltip:hover .tooltiptext {