From a36d988d02be72a3bef99157dde97ba4e1100eba Mon Sep 17 00:00:00 2001
From: lenacohen <lcohen@eff.org>
Date: Thu, 21 Nov 2024 11:15:01 -0500
Subject: [PATCH] Add close icon to tooltip

---
 src/js/popup.js    |  7 ++++++-
 src/lib/i18n.js    |  9 +++++++++
 src/skin/popup.css | 18 ++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/js/popup.js b/src/js/popup.js
index dc9927733a..8326af7c35 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -537,7 +537,12 @@ function createBreakageNote(domain, i18n_message_key) {
   // return the tooltip we want (the breakage note, not Allow)
   $slider_allow.tooltipster('destroy').tooltipster({
     autoClose: false,
-    content: chrome.i18n.getMessage(i18n_message_key),
+    content: $(`<div>
+                    <a href="" id="dismiss-tooltip" role="button" aria-label="i18n_report_close">
+                      <img src="../icons/close.svg" alt="">
+                    </a>
+                  <div>${chrome.i18n.getMessage(i18n_message_key)}</div>
+                </div>`),
     functionReady: function (tooltip) {
       // close on tooltip click/tap
       $(tooltip.elementTooltip()).on('click', function (e) {
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 191ede1f41..64093884aa 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -59,6 +59,15 @@ function setTextDirection() {
     ['#fittslaw', '.overlay-close'].forEach((selector) => {
       toggle_css_value(selector, "float", "right", "left");
     });
+    // Workaround for tooltipster dynamically inserted after localization
+    let css = document.createElement("style");
+    css.textContent = `
+    #dismiss-tooltip {
+      float: left;
+      right: unset;
+      left: -5px;
+    }`;
+    document.body.appendChild(css);
 
   // options page
   } else if (document.location.pathname == "/skin/options.html") {
diff --git a/src/skin/popup.css b/src/skin/popup.css
index 1e10a3090e..53f4d4030b 100644
--- a/src/skin/popup.css
+++ b/src/skin/popup.css
@@ -508,6 +508,24 @@ a.overlay-close:hover {
     cursor: pointer;
 }
 
+#dismiss-tooltip {
+    float: right;
+    margin: 5px;
+    position: relative;
+    top: -5px;
+    right: -5px;
+}
+  
+#dismiss-tooltip img {
+    height: 18px;
+    filter: invert(100%) sepia(0%) saturate(7489%) hue-rotate(126deg) brightness(106%) contrast(100%);
+}
+  
+#dismiss-tooltip:hover img, #dismiss-tooltip:focus img {
+    /* Calculated with https://codepen.io/sosuke/pen/Pjoqqp to match #fff */
+    filter: invert(93%) sepia(8%) saturate(30%) hue-rotate(203deg) brightness(99%) contrast(94%);
+}
+
 #firstparty-protections-container, #youtube-message-container {
     border-bottom: 1px solid #d3d3d3;
     margin: 10px 0;