From ae0a38a04b11373d1b6d85bccf8b5d5383f077aa Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sat, 19 Mar 2016 23:49:34 +0800
Subject: add pure css tooltip code

---
 src/tooltips.less | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/tooltips.less

(limited to 'src/tooltips.less')

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
-- 
cgit v1.3.1-23-gd82d