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
@@ -660,6 +660,7 @@
     bottom: 0px;
     position: absolute;
   }
+
 }
 
 /*
@@ -1183,18 +1184,19 @@
   position: relative;
 }
 
-[role="tooltip"]
+[role="tooltip"],
+[role="tooltip"]:hover
 {
   right: -0.8rem;
   margin-top: 0.8rem;
-  opacity: 1;
   padding: 0.2rem 1rem;
   position: absolute;
-  -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;
+  -webkit-transition: opacity 200ms ease-in-out 0ms,
+    visibility 0ms linear 0ms;
+  transition: opacity 200ms ease-in-out 0ms,
+    visibility 0ms linear 0ms;
+  visibility: hidden;
+  opacity: 0;
   width: 15rem;
   z-index: 1;
 }
@@ -1213,14 +1215,17 @@
   background-color: #FFFFFF;
 }
 
-
-.tooltip:not(:hover) > [role="tooltip"],
-[role="tooltip"]:hover
+.tooltip:focus > [role="tooltip"],
+.tooltip:hover > [role="tooltip"]
 {
-  visibility: hidden;
-  opacity: 0;
-  -webkit-transition-delay: 0ms;
-  transition-delay: 0ms;
+  visibility: visible;
+  opacity: 1;
+}
+
+.tooltip:hover > [role="tooltip"]
+{
+  -webkit-transition-delay: 400ms;
+  transition-delay: 400ms;
 }
 
 .context-menu
@@ -1251,6 +1256,7 @@
 }
 
 [role="tooltip"]::before,
+[role="tooltip"]::after,
 .context-menu::before
 {
   content: "";
@@ -1268,7 +1274,17 @@
   right: 15px;
 }
 
-html[dir="rtl"] [role="tooltip"]::before
+[role="tooltip"]::after
+{
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid #FFFFFF;
+  top: -9px;
+  right: 15px;
+}
+
+html[dir="rtl"] [role="tooltip"]::before,
+html[dir="rtl"] [role="tooltip"]::after
 {
   right: auto;
   left: 15px;