add pure css tooltip code

5 files changed, 171 insertions, 6 deletions

diff --git a/demo/index.html b/demo/index.html
index 18c3d5c..af237e3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -65,7 +65,7 @@
         <section class="layout">
             <header class="text-center"><h4>flexbox layout</h4></header>
             <div class="columns">
-                <div class="column col-6">
+                <div class="column">
                     First column
                 </div>
                 <div class="column">
@@ -77,6 +77,12 @@
                 <div class="column">
                     Fourth column
                 </div>
+                <div class="column">
+                    Fifth column
+                </div>
+                <div class="column">
+                    Sixth column
+                </div>
             </div>
             <div class="columns">
                 <div class="column col-4">
@@ -92,6 +98,20 @@
                     Fourth column
                 </div>
             </div>
+            <div class="columns">
+                <div class="column col-2">
+                    First column
+                </div>
+                <div class="column col-4">
+                    Second column
+                </div>
+                <div class="column col-4">
+                    Third column
+                </div>
+                <div class="column col-2">
+                    Fourth column
+                </div>
+            </div>
         </section>
         <section class="tables">
             <header class="text-center"><h4>tables</h4></header>
@@ -138,12 +158,8 @@
                 <div class="column">
                     <button class="btn">default button</button>
                     <button class="btn loading">default button</button>
-                </div>
-                <div class="column">
                     <button class="btn btn-primary">primary button</button>
                     <button class="btn btn-primary loading">primary button</button>
-                </div>
-                <div class="column">
                     <button class="btn btn-link">link button</button>
                     <button class="btn btn-link loading">link button</button>
                 </div>
@@ -163,6 +179,23 @@
                 </div>
             </div>
         </section>
+        <section class="tooltips">
+            <header class="text-center"><h4>tooltips</h4></header>
+            <div class="columns">
+                <div class="column">
+                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." data-tooltip-pos="top">top tooltip</button>
+                </div>
+                <div class="column">
+                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-tooltip-pos="right">right tooltip</button>
+                </div>
+                <div class="column">
+                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-tooltip-pos="bottom">bottom tooltip</button>
+                </div>
+                <div class="column">
+                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-tooltip-pos="left">left tooltip</button>
+                </div>
+            </div>
+        </section>
         <section class="forms">
             <header class="text-center"><h4>forms</h4></header>
             <form class="col-6">
diff --git a/dist/spectre.css b/dist/spectre.css
index 779a67f..5299da4 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -1145,6 +1145,68 @@ textarea.form-input {
   padding: 0 .4rem;
   color: #c5c5c5;
 }
+.tooltip {
+  position: relative;
+}
+.tooltip::after {
+  content: attr(data-tooltip);
+  display: block;
+  max-width: 32rem;
+  padding: .6rem 1rem;
+  border-radius: .3rem;
+  background-color: rgba(51, 51, 51, 0.9);
+  opacity: 0;
+  color: #fff;
+  font-size: 1.2rem;
+  line-height: 1.6rem;
+  text-overflow: ellipsis;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+  overflow: hidden;
+  z-index: 99;
+  pointer-events: none;
+  -webkit-transition: all .216s ease;
+  transition: all .216s ease;
+}
+.tooltip:hover::after {
+  opacity: 1;
+  -webkit-transform: translate(-50%, -0.5rem);
+          transform: translate(-50%, -0.5rem);
+}
+.tooltip[data-tooltip-pos="right"]::after {
+  bottom: 50%;
+  left: 100%;
+  -webkit-transform: translate(0, 50%);
+          transform: translate(0, 50%);
+}
+.tooltip[data-tooltip-pos="right"]:hover::after {
+  -webkit-transform: translate(0.5rem, 50%);
+          transform: translate(0.5rem, 50%);
+}
+.tooltip[data-tooltip-pos="bottom"]::after {
+  top: 100%;
+  bottom: auto;
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
+}
+.tooltip[data-tooltip-pos="bottom"]:hover::after {
+  -webkit-transform: translate(-50%, 0.5rem);
+          transform: translate(-50%, 0.5rem);
+}
+.tooltip[data-tooltip-pos="left"]::after {
+  right: 100%;
+  bottom: 50%;
+  left: auto;
+  -webkit-transform: translate(0, 50%);
+          transform: translate(0, 50%);
+}
+.tooltip[data-tooltip-pos="left"]:hover::after {
+  -webkit-transform: translate(-0.5rem, 50%);
+          transform: translate(-0.5rem, 50%);
+}
 .clearfix::after,
 .container::after,
 .columns::after {
diff --git a/spectre.less b/spectre.less
index 988ac37..d0b7a71 100644
--- a/spectre.less
+++ b/spectre.less
@@ -22,7 +22,7 @@
 @import 'src/navigation.less';
 //@import 'src/cards.less';
 //@import 'src/modals.less';
-//@import 'src/tooltips.less';
+@import 'src/tooltips.less';
 //@import 'src/animations.less';
 
 // Utility classes
diff --git a/src/dist/menus.css b/src/dist/menus.css
deleted file mode 100644
index e69de29..0000000
--- a/src/dist/menus.css
+++ /dev/null
diff --git a/src/tooltips.less b/src/tooltips.less
new file mode 100644
index 0000000..4d0f680
--- /dev/null
+++ b/src/tooltips.less
@@ -0,0 +1,70 @@
+// Tooltips
+.tooltip {
+  position: relative;
+
+  &::after {
+    content: attr(data-tooltip);
+    display: block;
+    max-width: 32rem;
+    padding: .6rem 1rem;
+    border-radius: .3rem;
+    background-color: fade(#333, 90%);
+    opacity: 0;
+    color: #fff;
+    font-size: 1.2rem;
+    line-height: 1.6rem;
+    text-overflow: ellipsis;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    overflow: hidden;
+    z-index: 99;
+    pointer-events: none;
+    transition: all .216s ease;
+  }
+  &:hover {
+    &::after {
+      opacity: 1;
+      transform: translate(-50%, -.5rem);
+    }
+  }
+
+  &[data-tooltip-pos="right"] {
+    &::after {
+      bottom: 50%;
+      left: 100%;
+      transform: translate(0, 50%);
+    }
+    &:hover {
+      &::after {
+        transform: translate(.5rem, 50%);
+      }
+    }
+  }
+  &[data-tooltip-pos="bottom"] {
+    &::after {
+      top: 100%;
+      bottom: auto;
+      transform: translate(-50%, 0);
+    }
+    &:hover {
+      &::after {
+        transform: translate(-50%, .5rem);
+      }
+    }
+  }
+  &[data-tooltip-pos="left"] {
+    &::after {
+      right: 100%;
+      bottom: 50%;
+      left: auto;
+      transform: translate(0, 50%);
+    }
+    &:hover {
+      &::after {
+        transform: translate(-.5rem, 50%);
+      }
+    }
+  }
+}
\ No newline at end of file