Issue 2356 - Implemented tooltip functionality

skin/options.css

Index: skin/options.css
===================================================================
--- a/skin/options.css
+++ b/skin/options.css
@@ -95,12 +95,16 @@
 .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
@@ -134,12 +138,17 @@
   padding: 8px 0px 16px 0px;
 }
 
-.flex-container
+.hbox
 {
   display: flex;
   flex-flow: row wrap;
 }
 
+.hbox > div
+{
+  flex: 1;

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

In this case "flex-wrap: wrap" will have no effect.
I think we need to specify min-width.

[Thomas Greiner, 2015/07/29 09:59:52]

There's no wrapping necessary in the current version. Therefore I'd suggest
tackling that in #2746. Removed `flex-wrap` for now.

Also added `min-width` to the tab content container for now so that the design
doesn't look too screwed up on smaller screens until we get around tackling
#2746.

+}
+
 .tabs li
 {
   cursor: pointer;
@@ -253,6 +262,7 @@
   background-color: #FFFFFF;
   border: 1px solid #CDCDCD;
   border-radius: 8px;
+  box-sizing: border-box;
   padding: 0px 60px 40px 60px;
   width: 960px;
 }
@@ -307,7 +317,6 @@
   margin: 0px;
   padding: 0px;
   position: relative;
-  width: 400px;
 }
 
 .table li
@@ -546,7 +555,6 @@
 
 #custom-wrapper
 {
-  width: 400px;
   height: 290px;
   overflow: auto;
 }
@@ -747,11 +755,20 @@
   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;
 }
 
@@ -770,6 +787,103 @@
   -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
+{
+  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
 */