Re-implement breakage note with close button and without tooltipster

src/js/popup.js

@@ -560,42 +560,73 @@ function revertDomainControl(event) {
 }
 
 /**
- * Tooltip that explains how to enable signing into websites with Google.
- */
+  * Tooltip that explains how to enable signing into websites with Google.
+  */
 function createBreakageNote(domain, i18n_message_key) {
-  let $slider_allow = $(`#blockedResourcesInner label[for="allow-${domain.replace(/\./g, '-')}"]`);
-
-  // first remove the Allow tooltip so that future tooltipster calls
-  // return the tooltip we want (the breakage note, not Allow)
-  $slider_allow.tooltipster('destroy').tooltipster({
-    autoClose: false,
-    content: chrome.i18n.getMessage(i18n_message_key),
-    functionReady: function (tooltip) {
-      // close on tooltip click/tap
-      $(tooltip.elementTooltip()).on('click', function (e) {
-        e.preventDefault();
-        tooltip.hide();
-      });
-      // also when Report Broken Site or Share overlays get activated
-      $('#error, #share').off('click.breakage-note').on('click.breakage-note', function (e) {
-        e.preventDefault();
-        tooltip.hide();
-      });
-    },
-    interactive: true,
-    position: ['top'],
-    trigger: 'custom',
-    theme: 'tooltipster-badger-breakage-note'
+  if (!POPUP_DATA.settings.seenComic && POPUP_DATA.showLearningPrompt && POPUP_DATA.criticalError) {
+    return;
+  }
+
+  let $clicker = $(`.clicker[data-origin="${domain}"]`);
+  let $switchContainer = $clicker.find('.switch-container');
+
+  // Create tooltip HTML
+  let $tooltip = $(`
+   <div class="breakage-note-tooltip" role="tooltip">
+     <div class="tooltip-box">
+       <button class="dismiss-tooltip" aria-label="${chrome.i18n.getMessage("report_close")}">×</button>
+       <div class="tooltip-content">${chrome.i18n.getMessage(i18n_message_key)}</div>
+     </div>
+     <div class="tooltip-arrow">
+       <div class="tooltip-arrow-inner"></div>
+     </div>
+   </div>
+ `);
+
+  // Cannot insert inside blockedResourcesInner because it'll be cut off
+  $('#blockedResourcesInner').before($tooltip);
+
+  let switchOffset = $switchContainer.offset();
+  let switchWidth = $switchContainer.outerWidth();
+  let switchHeight = $switchContainer.outerHeight();
+  let arrowWidth = $tooltip.find('.tooltip-arrow-inner').outerWidth();
+  let tooltipHeight = $tooltip.outerHeight();
+
+  // Tooltip should be above the the switch container
+  $tooltip.css({
+    top: (switchOffset.top - tooltipHeight - switchHeight) + 'px',
+    left: '0px',
+    visibility: 'visible',
+  });
 
-  // now restore the Allow tooltip
-  }).tooltipster(Object.assign({}, DOMAIN_TOOLTIP_CONF, {
-    content: chrome.i18n.getMessage('domain_slider_allow_tooltip'),
-    multiple: true
-  }));
+  // Arrow should point to the allow toggle of the slider
+  let arrowLeft = (switchOffset.left + (switchWidth * 5/6)) - arrowWidth / 2;
+  $tooltip.find('.tooltip-arrow').css('left', arrowLeft + 'px');
 
-  if (POPUP_DATA.settings.seenComic && !POPUP_DATA.showLearningPrompt && !POPUP_DATA.criticalError) {
-    $slider_allow.tooltipster('show');
-  }
+  let io = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        $tooltip.show(); // show tooltip when slider is visible
+      } else {
+        $tooltip.hide(); // hide tooltip when slider is not visible
+      }
+    });
+  }, { threshold: 0 });
+  io.observe($switchContainer[0]);
+
+  // Close button handler
+  $tooltip.find('.dismiss-tooltip').on('click', function(e) {
+    e.preventDefault();
+    io.disconnect();
+    $tooltip.fadeOut(200);
+  });
+
+  // Also close when Report Broken Site or Share overlays get activated
+  $('#error, #share').off('click.breakage-note').on('click.breakage-note', function (e) {
+    e.preventDefault();
+    io.disconnect();
+    $tooltip.remove();
+  });
 }
 
 /**

src/skin/popup.css

@@ -519,18 +519,54 @@ a.overlay-close:hover {
     border: none;
 }
 
-.tooltipster-badger-breakage-note.tooltipster-sidetip .tooltipster-box {
-    background-color: #F06A0A;
-    padding: 10px 0;
+.breakage-note-tooltip {
+    position: absolute;
+    z-index: 999999;
+    /* Firefox Android workaround: must define position before measuring tooltip height for position calculations */
+    top: 0;
+    left: 0;
+    visibility: hidden;
 }
-.tooltipster-badger-breakage-note.tooltipster-sidetip .tooltipster-content {
+
+.breakage-note-tooltip .tooltip-box {
+    background-color: #F06A0A;
     color: #fefefe;
-    cursor: pointer;
     font-size: 15px;
+    line-height: 1.2;
+    border-radius: 7px;
+    padding: 16px 12px;
 }
-.tooltipster-badger-breakage-note.tooltipster-sidetip .tooltipster-arrow-background {
-    border-top-color: #F06A0A;
+
+.breakage-note-tooltip .dismiss-tooltip {
+    float: right;
+    background: none;
+    border: none;
+    color: #fefefe;
+    font-size: 25px;
+    font-weight: bold;
+    line-height: 1;
     cursor: pointer;
+    margin-left: 5px;
+    padding: 0;
+    position: relative;
+    top: -8px;
+}
+
+.breakage-note-tooltip .dismiss-tooltip:hover {
+    color: #ddd;
+}
+
+.breakage-note-tooltip .tooltip-arrow {
+    position: absolute;
+}
+
+.breakage-note-tooltip .tooltip-arrow-inner {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background-color: #F06A0A;
+    transform: rotate(45deg);
+    top: -8px;
 }
 
 #firstparty-protections-container, #youtube-message-container {