Add close icon to tooltip

Author: lenacohen

src/js/popup.js

@@ -569,7 +569,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) {

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") {

src/skin/popup.css

@@ -533,6 +533,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;