Issue 2356 - Implemented tooltip functionality

skin/options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 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 77 matching lines @@
 input[type="text"], input[type="search"]
 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 .option-name
 {
   display: flex;
+  margin-bottom: 16px;
+  margin-top: 24px;
 }
 
-.option-name > *
+.option-name > :first-child
 {
-  -moz-margin-end: 6px;
-  -webkit-margin-end: 6px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 #nav-sidebar
 {
   min-width: 198px;
 }
 
 #nav-sidebar .fixed
 {
   top: 40px;
@@ skipping 13 matching lines @@
   font-size: 16px;
   line-height: 1em;
 }
 
 #page-title h1
 {
   margin: 0px;
   padding: 8px 0px 16px 0px;
 }
 
-.flex-container
+.row-bisect
 {
   display: flex;
   flex-flow: row wrap;
 }
 
+.row-bisect > div
+{
+  width: 400px;
+}
+
 .tabs li
 {
   cursor: pointer;
   display: flex;
 }
 
 .tabs li a
 {
   flex: 1;
   color: inherit;
@@ skipping 147 matching lines @@
   cursor: pointer;
   display: flex;
 }
 
 .table
 {
   list-style: none;
   margin: 0px;
   padding: 0px;
   position: relative;
-  width: 400px;
 }
 
 .table li
 {
   display: flex;
   padding: 14px 0px;
   -webkit-padding-start: 16px;
   -moz-padding-start: 16px;
 }
 
@@ skipping 218 matching lines @@
 
 #blocking-languages,
 #acceptable-ads
 {
   -moz-padding-end: 40px;
   -webkit-padding-end: 40px;
 }
 
 #custom-wrapper
 {
-  width: 400px;
   height: 290px;
   overflow: auto;
 }
 
 #custom-wrapper .table
 {
   width: 100%;
 }
 
 #whitelisting .controls
@@ skipping 180 matching lines @@
 {
   content: "";
   background-position: -28px -85px;
   cursor: pointer;
   height: 10px;
   -webkit-margin-start: 6px;
   -moz-margin-start: 6px;
   width: 10px;
 }
 
+/*
+  Tooltips
+*/
+
 .tooltip, #block-element-explanation a
 {
-  border-bottom: dotted 2px;
+  border-bottom: dashed 1px;
   color: #3A7BA6;
+  cursor: default;
   font-size: 12px;
+  height: 15px;
+  line-height: 19px;
+  margin: 0px 4px;
+  position: relative;
   text-decoration: none;
 }
 
 #content-advanced .tooltip
 {
   -moz-margin-start: 8px;
   -webkit-margin-start: 8px;
 }
 
 #block-element-explanation a
 {
   color: black;
   border-bottom-color: #3A7BA6;
   font-weight: 600;
   -moz-padding-start: 0px;
   -webkit-padding-start: 0px;
 }
 
+div[role="tooltip"]
+{
+  background-color: rgba(45, 45, 45, 0.95);
+  border-radius: 3px;
+  color: #FFF;
+  font-size: 14px;
+  font-weight: 400;
+  left: -20px;
+  line-height: 18px;
+  margin-top: 14px;
+  opacity: 1;
+  padding: 20px;
+  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;
+  width: 400px;
+  z-index: 1;
+}
+
+html[dir="ltr"] div[role="tooltip"].flip-vertical,
+html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)
+{
+  left: inherit;
+  right: -20px;
+}
+
+.tooltip:not(:hover) > div[role="tooltip"],
+div[role="tooltip"]:hover

[saroyanm, 2015/07/28 17:21:42]

why we need "div[role="tooltip"]:hover" selector here ? 

I think the first selector should specify the transition-delay and do the magic.

[Thomas Greiner, 2015/07/28 18:19:22]

Because when you hover over the tooltip it should disappear. Usually, it would
stay visible because by hovering over the DIV, you're also hovering over its
parent element which in this case is `.tooltip`.
It already does set a transition delay of 400ms which causes the tooltip to
become visible delayed by 400ms. This one, however, changes the transition delay
to 0ms causing it to disappear instantly instead of after 400ms.

[saroyanm, 2015/07/29 09:38:59]

My mistake.

+{
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
+}
+
+div[role="tooltip"]::before
+{
+  background-image: url(options-sprite.png);
+  background-position: -8px -42px;
+  content: "";
+  height: 6px;
+  position: absolute;
+  top: -6px;
+  width: 14px;
+  left: 30px;
+}
+
+html[dir="ltr"] div[role="tooltip"].flip-vertical::before,
+html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)::before
+{
+  left: inherit;
+  right: 30px;
+}
+
+div[role="tooltip"] img
+{
+  float: left;
+  height: 64px;
+  margin-top: -2px;
+  margin-bottom: 10px;
+  width: 64px;
+  -moz-margin-end: 10px;
+  -webkit-margin-end: 10px;
+}
+
+html[dir="rtl"] div[role="tooltip"] img
+{
+  float: right;
+}
+
+div[role="tooltip"] p
+{
+  font-weight: 400;
+  margin: 0px;
+}
+
+div[role="tooltip"] p:not(:first-of-type)
+{
+  margin-top: 18px;
+}
+
+div[role="tooltip"] .notes
+{
+  border-top: 1px solid #717171;
+  font-size: 12px;
+  margin-top: 14px;
+  padding-top: 14px;
+}
+
+div[role="tooltip"] .notes p
+{
+  font-weight: 300;
+}
+
 /*
   Help tab content
 */
 
 #content-help
 {
   counter-reset: section;
 }
 
 #content-help h1::before
@@ skipping 180 matching lines @@
   -moz-padding-end: 10px;
   -webkit-padding-start: 0px;
   -moz-padding-start: 0px;
 }
 
 #other-language .display
 {
   -webkit-margin-start: 10px;
   -moz-margin-start: 10px;
 }