diff --git a/src/js/popup.js b/src/js/popup.js
index 69a0267a2d..558ff5705c 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: $(`
+
+
+
+
${chrome.i18n.getMessage(i18n_message_key)}
+
`),
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;