Issue 5542: Implement tooltips for new options page

skin/desktop-options.css

Index: skin/desktop-options.css
===================================================================
--- a/skin/desktop-options.css
+++ b/skin/desktop-options.css
@@ -225,15 +225,39 @@
 .side-controls button
 {
   margin: 0rem;
-  -moz-margin-start: 1rem;
-  -webkit-margin-start: 1rem;
+}
+
+/*
+  Due to Edge adoption as new target browser
+  we cannot use -moz/webkit-margin-start
+  or -moz/webkit-margin-end because
+  these lack Edge support.
+  Yet we need to preserve html direction
+  and potential UI that might swap right to left.
+*/
+html:not([dir="rtl"]) .side-controls button
+{
+  margin-left: 1rem;
+}
+
+html[dir="rtl"] .side-controls button
+{
+  margin-right: 1rem;
 }
 
 .side-controls.wrap button
 {
   margin: 0.6rem 0rem;
-  -moz-margin-start: auto;
-  -webkit-margin-start: auto;
+}
+
+html:not([dir="rtl"]) .side-controls.wrap button
+{
+  margin-left: auto;
+}
+
+html[dir="rtl"] .side-controls.wrap button
+{
+  margin-right: auto;
 }
 
 /*
@@ -544,7 +568,7 @@
 
 #sidebar
 {
-  flex-shrink: 0; 
+  flex-shrink: 0;
 }
 
 #sidebar .fixed
@@ -615,10 +639,8 @@
   display: flex;
   margin-top: -1px;
   padding: 1rem 0.8rem;
-  -moz-margin-end: -1px;
-  -webkit-margin-end: -1px;
-  -moz-margin-start: -1px;
-  -webkit-margin-start: -1px;
+  margin-left: -1px;
+  margin-right: -1px;
   border-color: #CDCDCD transparent;
   border-style: solid;
   border-width: 1px;
@@ -629,12 +651,20 @@
 
 li a[role="tab"][aria-selected]
 {
-  -moz-border-start-color: #CDCDCD;
-  -webkit-border-start-color: #CDCDCD;
   font-weight: 700;
   background-color: #FFF;
 }
 
+html:not([dir="rtl"]) li a[role="tab"][aria-selected]
+{
+  border-left-color: #CDCDCD;
+}
+
+html[dir="rtl"] li a[role="tab"][aria-selected]
+{
+  border-right-color: #CDCDCD;
+}
+
 #sidebar footer
 {
   width: 100%;
@@ -735,8 +765,16 @@
 section.cols > *:first-child
 {
   flex: 1;
-  -moz-margin-end: 2rem;
-  -webkit-margin-end: 2rem;
+}
+
+html:not([dir="rtl"]) section.cols > *:first-child
+{
+  margin-right: 2rem;
+}
+
+html[dir="rtl"] section.cols > *:first-child
+{
+  margin-left: 2rem;
 }
 
 section.cols > *:last-child
@@ -811,8 +849,16 @@
 {
   font-weight: 700;
   font-size: 1rem;
-  -moz-margin-end: 0.5rem;
-  -webkit-margin-end: 0.5rem;
+}
+
+html:not([dir="rtl"]) #acceptable-ads label
+{
+  margin-right: 0.5rem;
+}
+
+html[dir="rtl"] #acceptable-ads label
+{
+  margin-left: 0.5rem;
 }
 
 #dnt
@@ -976,10 +1022,20 @@
 .table .col5:nth-of-type(5)
 {
   flex: 1;
-  -moz-margin-start: 0;
-  -webkit-margin-start: 0;
-  -moz-margin-end: 1.8rem;
-  -webkit-margin-end: 1.8rem;
+}
+
+html:not([dir="rtl"]) .th .col5:nth-of-type(5),
+html:not([dir="rtl"]) .table .col5:nth-of-type(5)
+{
+  margin-left: 0;
+  margin-right: 1.8rem;
+}
+
+html[dir="rtl"] .th .col5:nth-of-type(5),
+html[dir="rtl"] .table .col5:nth-of-type(5)
+{
+  margin-right: 0;
+  margin-left: 1.8rem;
 }
 
 .table.cols > span
@@ -992,10 +1048,14 @@
   padding: 0.5rem 0rem;
 }
 
-.table.cols .state
+html:not([dir="rtl"]) .table.cols .state
 {
-  -moz-margin-start: 1rem;
-  -webkit-margin-start: 1rem;
+  margin-left: 1rem;
+}
+
+html[dir="rtl"] .table.cols .state
+{
+  margin-right: 1rem;
 }
 
 .table.cols .gear
@@ -1051,12 +1111,27 @@
 .tooltip
 {
   position: relative;
-  margin: 0rem;
-  -moz-margin-end: 1rem;
-  -webkit-margin-end: 1rem;
+  margin: 0;
   line-height: 1.5rem;
   text-decoration: none;
   cursor: help;
+  /* reset minimal button style */
+  color: inherit;
+  font: inherit;
+  text-transform: initial;
+  text-align: initial;
+  font-weight: initial;
+  font-size: initial;
+}
+
+html:not([dir="rtl"]) .tooltip
+{
+  margin-right: 1rem;
+}
+
+html[dir="rtl"] .tooltip
+{
+  margin-left: 1rem;
 }
 
 /* 
@@ -1110,10 +1185,14 @@
   border: 2px solid #077CA6;
 }
 
-#content-whitelist form button
+html:not([dir="rtl"]) #content-whitelist form button
 {
-  -moz-margin-start: 0.7rem;
-  -webkit-margin-start: 0.7rem;
+  margin-left: 0.7rem;
+}
+
+html[dir="rtl"] #content-whitelist form button
+{
+  margin-right: 0.7rem;
 }
 
 #whitelisting-table li
@@ -1190,13 +1269,17 @@
   opacity: 1;
   padding: 0.2rem 1rem;
   position: absolute;
+  visibility: visible;
+  width: 15rem;
+  z-index: 1;
+}
+
+.tooltip:not(:focus) > [role="tooltip"]
+{
   -webkit-transition: opacity 200ms ease-in-out 400ms,
     visibility 0ms linear 400ms;
   transition: opacity 200ms ease-in-out 400ms,
     visibility 0ms linear 400ms;
-  visibility: visible;
-  width: 15rem;
-  z-index: 1;
 }
 
 html[dir="rtl"] [role="tooltip"]
@@ -1213,8 +1296,7 @@
   background-color: #FFFFFF;
 }
 
-
-.tooltip:not(:hover) > [role="tooltip"],
+.tooltip:not(:focus):not(:hover) > [role="tooltip"],
 [role="tooltip"]:hover
 {
   visibility: hidden;
@@ -1346,8 +1428,16 @@
 #social ul li
 {
   display: inline-block;
-  -moz-margin-end: 1rem;
-  -webkit-margin-end: 1rem;
+}
+
+html:not([dir="rtl"]) #social ul li
+{
+  margin-right: 1rem;
+}
+
+html[dir="rtl"] #social ul li
+{
+  margin-left: 1rem;
 }
 
 #social ul li a