Issue 5542: Implement tooltips for new options page

skin/desktop-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 642 matching lines @@
   #sidebar .fixed
   {
     position: fixed;
   }
 
   #sidebar footer
   {
     bottom: 0px;
     position: absolute;
   }
+
 }
 
 /*
   Main content
  */
 
 body[data-tab|="general"] #content-general,
 body[data-tab|="advanced"] #content-advanced,
 body[data-tab|="whitelist"] #content-whitelist,
 body[data-tab|="help"] #content-help
@@ skipping 503 matching lines @@
 
 /*
   Context menu
  */
 
 li [role="menubar"]
 {
   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;
 }
 
 html[dir="rtl"] [role="tooltip"]
 {
   right: auto;
   left: -0.8rem;
 }
 
 [role="tooltip"],
 .context-menu .content
 {
   border: 1px solid #077CA6;
   border-radius: 3px;
   background-color: #FFFFFF;
 }
 
+.tooltip:focus > [role="tooltip"],
+.tooltip:hover > [role="tooltip"]
+{
+  visibility: visible;
+  opacity: 1;
+}
 
-.tooltip:not(:hover) > [role="tooltip"],
-[role="tooltip"]:hover
+.tooltip:hover > [role="tooltip"]
 {
-  visibility: hidden;
-  opacity: 0;
-  -webkit-transition-delay: 0ms;
-  transition-delay: 0ms;
+  -webkit-transition-delay: 400ms;
+  transition-delay: 400ms;
 }
 
 .context-menu
 {
   position: absolute;
   right: 2.5rem;
   top: -2rem;
   z-index: 1;
   visibility: hidden;
 }
@@ skipping 10 matching lines @@
   position: relative;
   cursor: default;
 }
 
 li.show-context-menu .context-menu
 {
   visibility: visible;
 }
 
 [role="tooltip"]::before,
+[role="tooltip"]::after,
 .context-menu::before
 {
   content: "";
   width: 0rem;
   height: 0rem;
   position: absolute;
 }
 
 [role="tooltip"]::before
 {
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #077CA6;
   top: -10px;
   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;
 }
 
 .context-menu::before
 {
   border-left: 10px solid #077CA6;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
@@ skipping 229 matching lines @@
   font-size: 1rem;
   color: #077CA6;
   background-color: #E1F2FA;
 }
 
 #notification strong
 {
   flex: 1;
   text-align: center;
 }