better tooltips for popup UI

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;

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;

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);
 });
 
 /******************************************************************************/

src/popup.html

@@ -13,13 +13,12 @@
 <a href="dashboard.html" target="_blank" id="gotoPrefs" title="popupTipDashboard"><span id="appname">&nbsp;</span><span id="version">&nbsp;</span></a>
 <div id="panes">
     <div>
-        <p id="switch" data-i18n-tip="popupPowerSwitchInfo"><span class="fa">&#xf011;</span></p>
+        <p id="switch" data-i18n-tip="popupPowerSwitchInfo" data-tip-position="under"><span class="fa">&#xf011;</span></p>
-        <p id="switch-hint"></p>
         <h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt">&nbsp;</h2>
         <p class="statName">
             <span data-i18n="popupBlockedOnThisPagePrompt">&nbsp;</span>&ensp;
-            <span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker" data-tip-anchor="top">&#xf1fb;</span>&ensp;
+            <span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker">&#xf1fb;</span>&ensp;
-            <a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog" data-tip-anchor="top">&#xf06e;</a>
+            <a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog">&#xf06e;</a>
             </p>
         <p class="statValue" id="page-blocked">?</p>
         <p class="statName" data-i18n="popupBlockedSinceInstallPrompt">&nbsp;</p>
@@ -27,11 +26,12 @@
         <h2 data-i18n="popupHitDomainCountPrompt">&nbsp;</h2>
         <p class="statValue" id="popupHitDomainCount">&nbsp;</p>
         <div id="extraTools">
-            <span id="noPopups" class="hnSwitch fa" data-i18n-tip="popupTipNoPopups" data-tip-anchor="topcenter">&#xf0c5;<span></span></span>
+            <span id="noPopups" class="hnSwitch fa" data-i18n-tip="popupTipNoPopups">&#xf0c5;<span></span></span>
-            <span id="noStrictBlocking" class="hnSwitch fa" data-i18n-tip="popupTipNoStrictBlocking" data-tip-anchor="topcenter">&#xf071;<span></span></span>
+            <span id="noStrictBlocking" class="hnSwitch fa" data-i18n-tip="popupTipNoStrictBlocking">&#xf071;<span></span></span>
-            <span id="noCosmeticFiltering" class="hnSwitch fa" data-i18n-tip="popupTipNoCosmeticFiltering" data-tip-anchor="topcenter">&#xf070;<span class="badge"></span><span></span></span>
+            <span id="noCosmeticFiltering" class="hnSwitch fa" data-i18n-tip="popupTipNoCosmeticFiltering">&#xf070;<span class="badge"></span><span></span></span>
         </div>
         <div id="refresh" class="fa">&#xf021;</div>
+        <div id="tooltip"></div>
     </div><!-- DO NOT REMOVE --><div>
         <div id="firewallContainer">
             <div><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="*"> </span><span data-src="." data-des="*" data-type="*"> </span></div>
@@ -43,13 +43,13 @@
             <div><span data-i18n="popup3pFrameRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-frame"> </span><span data-src="." data-des="*" data-type="3p-frame"> </span></div>
         </div><div id="saveRules" class="fa">&#xf13e;</div>
     </div>
-    </div>
+</div>
 
 <div id="templates" style="display: none">
     <div><span></span><span data-src="/" data-des="" data-type="*"> </span><span data-src="." data-des="" data-type="*"> </span><span data-src="." data-des="" data-type="*"> </span></div>
     <div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
     <div id="hotspotTip"></div>
-    </div>
+</div>
 
 <script src="lib/punycode.js"></script>
 <script src="js/vapi-common.js"></script>