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 120 matching lines @@
   font-size: 16px;
   line-height: 1em;
 }
 
 #page-title h1
 {
   margin: 0px;
   padding: 8px 0px 16px 0px;
 }
 
-.row-bisect
+.hbox
 {
   display: flex;
-  flex-flow: row wrap;
-}
-
-.row-bisect > div
-{
-  width: 400px;
+  flex-direction: row;
+}
+
+.hbox > div
+{
+  flex: 1;
 }
 
 .tabs li
 {
   cursor: pointer;
   display: flex;
 }
 
 .tabs li a
 {
@@ skipping 95 matching lines @@
 #tab-contribute .icon
 {
   background-position: -31px -18px;
 }
 
 #tab-content
 {
   background-color: #FFFFFF;
   border: 1px solid #CDCDCD;
   border-radius: 8px;
+  box-sizing: border-box;
+  min-width: 960px;
   padding: 0px 60px 40px 60px;
   width: 960px;

[saroyanm, 2015/07/29 10:12:21]

nit: It's doesn't make any sense to have specified width here, but as far as I
understand this styles will be changed anyway so feel free keep it or remove so
we will come back to it later on.

 }
 
 #tab-content h1
 {
   border-bottom: 1px solid #CDCDCD;
   margin: 0px;
   padding: 40px 0px 16px 0px;
 }
 
 #link-version
@@ skipping 532 matching lines @@
 }
 
 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);
@@ skipping 246 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;
 }