diff --git a/src/css/common.css b/src/css/common.css
index a926aaf2f..570483b23 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -13,65 +13,6 @@
vertical-align: baseline;
}
-/* https://developer.mozilla.org/en-US/docs/Web/CSS/::after#Tooltips */
-[data-tip] {
- cursor: pointer;
- position: relative;
- }
-body:not(.advancedUser) [data-tip]:after {
- background-color: #ffffee;
- border: 1px solid gray;
- border-radius: 3px;
- box-shadow: 1px 1px 3px gray;
- box-sizing: border-box;
- color: black;
- content: attr(data-tip);
- font: 12px sans-serif;
- left: 0.5em;
- line-height: 130%;
- opacity: 0;
- padding: 4px 6px;
- pointer-events: none;
- position: fixed;
- right: 0.5em;
- text-align: left;
- top: 110%;
- visibility: hidden;
- white-space: pre-line;
- z-index: 20;
- }
-body [data-tip]:hover:after {
- opacity: 1;
- position: absolute;
- transition: visibility 0s 0.6s, opacity 0.2s 0.7s;
- -webkit-transition: visibility 0s 0.6s, opacity 0.2s 0.7s;
- visibility: visible;
- }
-body[dir=rtl] [data-tip]:hover:after {
- text-align: right;
- }
-
-body [data-tip][data-tip-anchor="top"]:hover:after {
- bottom: 140%;
- left: initial;
- top: auto;
- width: 8.5em;
- }
-body[dir=ltr] [data-tip][data-tip-anchor="top"]:hover:after {
- right: 0;
- }
-body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after {
- left: 0;
- }
-
-body [data-tip][data-tip-anchor="topcenter"]:hover:after {
- bottom: 140%;
- left: -225%;
- right: initial;
- top: auto;
- width: 8.5em;
- }
-
.hiddenFileInput {
visibility: hidden;
width: 0;
diff --git a/src/css/popup.css b/src/css/popup.css
index 00aff2af6..a2683cdfd 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -103,10 +103,6 @@ p {
body.off #switch .fa {
color: #ccc;
}
-#switch-hint {
- color: #888;
- font-size: 11px;
- }
#page-blocked {
font-size: 20px;
}
@@ -150,11 +146,16 @@ body.off #switch .fa {
}
#extraTools > span > span.badge {
color: #000;
- bottom: -2px;
+ bottom: 0;
font: 10px sans-serif;
- left: 100%;
position: absolute;
}
+body[dir="ltr"] #extraTools > span > span.badge {
+ left: 100%;
+ }
+body[dir="rtl"] #extraTools > span > span.badge {
+ right: 100%;
+ }
#extraTools > span.on > span:last-of-type {
color: #e00;
font-size: 20px;
@@ -202,6 +203,36 @@ body.dirty #refresh:hover {
color: black;
}
+#tooltip {
+ background-color: #ffffee;
+ border: 1px solid gray;
+ border-radius: 3px;
+ box-shadow: 1px 1px 3px gray;
+ box-sizing: border-box;
+ color: black;
+ cursor: pointer;
+ font: 12px sans-serif;
+ left: 5%;
+ line-height: 130%;
+ margin: 0.5em 0;
+ opacity: 0;
+ padding: 4px 6px;
+ pointer-events: none;
+ position: fixed;
+ text-align: center;
+ visibility: hidden;
+ white-space: pre-line;
+ width: 90%;
+ z-index: 100;
+ }
+#tooltip.show {
+ transition: opacity 0.2s 0.7s;
+ -webkit-transition: opacity 0.2s 0.7s;
+ visibility: visible;
+ opacity: 1;
+ }
+
+
#firewallContainer {
border: 0;
font-size: 12px;
diff --git a/src/js/popup.js b/src/js/popup.js
index 386205db4..3137861df 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -462,7 +462,10 @@ var renderPopup = function() {
var renderPopupLazy = function() {
var onDataReady = function(data) {
- uDom('#noCosmeticFiltering > span.badge').text(data.hiddenElementCount);
+ var v = data.hiddenElementCount;
+ uDom('#noCosmeticFiltering > span.badge').text(
+ typeof v === 'number' ? v.toLocaleString() : v
+ );
};
messager.send({
@@ -756,6 +759,39 @@ var getPopupData = function(tabId) {
/******************************************************************************/
+var onShowTooltip = function() {
+ if ( popupData.advancedUserEnabled ) {
+ return;
+ }
+
+ var tip = document.getElementById('tooltip');
+ var target = this;
+
+ tip.textContent = target.getAttribute('data-tip');
+ tip.style.removeProperty('top');
+ tip.style.removeProperty('bottom');
+
+ // Default is "over"
+ var pos;
+ var over = target.getAttribute('data-tip-position') !== 'under';
+ if ( over ) {
+ pos = document.body.getBoundingClientRect().height -
+ target.getBoundingClientRect().top;
+ tip.style.setProperty('bottom', pos + 'px');
+ } else {
+ pos = target.getBoundingClientRect().bottom;
+ tip.style.setProperty('top', pos + 'px');
+ }
+
+ uDom(tip).addClass('show');
+};
+
+var onHideTooltip = function() {
+ uDom('#tooltip').removeClass('show');
+};
+
+/******************************************************************************/
+
// Make menu only when popup html is fully loaded
uDom.onLoad(function () {
@@ -776,6 +812,9 @@ uDom.onLoad(function () {
uDom('.hnSwitch').on('click', toggleHostnameSwitch);
uDom('#saveRules').on('click', saveFirewallRules);
uDom('[data-i18n="popupAnyRulePrompt"]').on('click', toggleMinimize);
+
+ uDom('body').on('mouseenter', '[data-tip]', onShowTooltip)
+ .on('mouseleave', '[data-tip]', onHideTooltip);
});
/******************************************************************************/
diff --git a/src/popup.html b/src/popup.html
index d75936bb9..27f0c9533 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -13,13 +13,12 @@
-
-
+
-
-
+
+
?
@@ -27,12 +26,13 @@
+
+
+
+
-
+
+
+