(master): Add tooltip

Author: Joe Crick

index.html

@@ -11,10 +11,6 @@
 
 }
 
-.open-modal {
-  .button();
-}
-
 .modal-container {
   position: fixed;
   width: 100%;

main.css

@@ -8,7 +8,6 @@
 
   .popover-toggle-label,
   .popover-toggle-dismissable {
-    .button();
     cursor: pointer;
   }
 

main.css.map

@@ -0,0 +1,42 @@
+@import '../lib/variables';
+
+.tooltip {
+  display: inline-block;
+  position: absolute;
+
+  @media @small-device {
+    min-width: 0;
+    font-size: 12px;
+  }
+
+  .tooltip-target {
+    cursor: help;
+
+    &:hover + .tooltip-body {
+      display: block;
+    }
+
+  }
+
+  .tooltip-body {
+    display: none;
+    position: absolute;
+    padding: 20px;
+    text-align: justify;
+    min-width: 250px;
+    max-width: 350px;
+    z-index: 2000;
+
+    @media @medium-device {
+      min-width: 200px;
+    }
+
+    @media @small-device {
+      left: -150px;
+      max-width: 200px;
+      min-width: 100px;
+    }
+
+  }
+
+}

src/components/modal.less

@@ -25,4 +25,9 @@ body {
     border: 1px solid green;
   }
 
+  .tooltip-body {
+    margin-top: -100px;
+    margin-left: 100px;
+  }
+
 }

src/components/popover.less

@@ -7,3 +7,7 @@
 
 // SIZES
 @arrow-size: 15px;
+
+// MEDIA QUERIES
+@small-device: ~'only screen and (max-width: 479px)';
+@medium-device: ~'only screen and (min-width: 768px) and (max-width: 959px)';

src/components/tooltip.less

@@ -5,6 +5,7 @@
 @import 'components/carousel';
 @import 'components/popover';
 @import 'components/collapse';
+@import 'components/tooltip';
 
 .invisible {
   display: none;