diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 57b053d8d..91092fca2 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -32,8 +32,8 @@
"description":"appears as tab name in dashboard."
},
"popupPowerSwitchInfo":{
- "message":"click the power button to
permanently disable or enable
µBlock for the current site",
- "description":"English (mind the horizontal extent): click the power button to
permanently disable or enable
µBlock for the current site"
+ "message":"Click: permanently disable/enable µBlock for this site.\n\n-click: disable µBlock only on this page.",
+ "description":"English: Click: permanently disable/enable µBlock for this site.\n\n-click: disable µBlock only on this page."
},
"popupBlockedRequestPrompt":{
"message":"requests blocked",
diff --git a/css/common.css b/css/common.css
index 39e82975c..3c28d3606 100644
--- a/css/common.css
+++ b/css/common.css
@@ -14,4 +14,47 @@
}
#dashboard-nav-widgets {
direction: __MSG_@@bidi_dir__;
- }
\ No newline at end of file
+ }
+
+/* https://developer.mozilla.org/en-US/docs/Web/CSS/::after#Tooltips */
+*[data-tip] {
+ cursor: pointer;
+ position: relative;
+ }
+*[data-tip]:hover:after {
+ background-color: #ffffee;
+ border: 1px solid gray;
+ border-radius: 3px;
+ box-shadow: 1px 1px 3px gray;
+ color: black;
+ content: attr(data-tip);
+ direction: __MSG_@@bidi_dir__;
+ font: 11px sans-serif;
+ left: 0;
+ line-height: 130%;
+ min-width: 55vw;
+ padding: 4px 6px;
+ position: absolute;
+ text-align: __MSG_@@bidi_start_edge__;
+ top: 110%;
+ white-space: pre-line;
+ z-index: 20;
+ animation: tooltip 0.8s;
+ -webkit-animation: tooltip 0.8s;
+ }
+*[data-tip][data-tip-anchor="top"]:hover:after {
+ bottom: 105%;
+ __MSG_@@bidi_start_edge__: auto;
+ __MSG_@@bidi_end_edge__: -10vw;
+ top: auto;
+ }
+@keyframes tooltip {
+ 0% { opacity: 0; }
+ 85% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
+@-webkit-keyframes tooltip {
+ 0% { opacity: 0; }
+ 85% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
diff --git a/css/popup.css b/css/popup.css
index 30d33bd14..d5e16c165 100644
--- a/css/popup.css
+++ b/css/popup.css
@@ -5,6 +5,7 @@ body {
font: 13px sans-serif;
background-color: white;
direction: __MSG_@@bidi_dir__;
+ min-width: 160px;
}
h1,h2,h3,h4 {
margin: 0;
@@ -36,7 +37,8 @@ p {
text-align: center;
}
#switch .fa {
- font-size: 64px;
+ margin: 0;
+ font-size: 96px;
color: green;
cursor: pointer;
}
@@ -74,11 +76,3 @@ p {
.tool:hover {
color: #444;
}
-#options {
- margin: 16px 0 0 0;
- font-size: 12px;
- }
-.dim {
- color: #888;
- text-decoration: none;
- }
diff --git a/js/i18n.js b/js/i18n.js
index 68a037d63..a16b63a48 100644
--- a/js/i18n.js
+++ b/js/i18n.js
@@ -31,4 +31,10 @@ uDom.onLoad(function() {
this.setAttribute('title', title);
}
});
+ uDom('[data-i18n-tip]').forEach(function() {
+ this.setAttribute(
+ 'data-tip',
+ chrome.i18n.getMessage(this.getAttribute('data-i18n-tip')).replace(/
/g, '')
+ );
+ });
});
diff --git a/popup.html b/popup.html
index 4d22b75d0..ca163e3fa 100644
--- a/popup.html
+++ b/popup.html
@@ -11,10 +11,14 @@
µBlock
-
-
+
+
-
+
+
+
+
+
?
?