From 841ad29f6187afcd79b0f1db20d1b1b887817f63 Mon Sep 17 00:00:00 2001
From: ines <ines@ines.io>
Date: Wed, 17 May 2017 18:20:53 +0200
Subject: [PATCH] Add tooltips component

---
 website/assets/css/_components/_tooltips.sass | 29 +++++++++++++++++++
 website/assets/css/style.sass                 |  1 +
 2 files changed, 30 insertions(+)
 create mode 100644 website/assets/css/_components/_tooltips.sass

diff --git a/website/assets/css/_components/_tooltips.sass b/website/assets/css/_components/_tooltips.sass
new file mode 100644
index 000000000..a19456aa5
--- /dev/null
+++ b/website/assets/css/_components/_tooltips.sass
@@ -0,0 +1,29 @@
+//- 💫 CSS > COMPONENTS > TOOLTIPS
+
+[data-tooltip]
+    position: relative
+
+    @include breakpoint(min, sm)
+        &:before
+            @include position(absolute, top, left, 125%, 50%)
+            display: inline-block
+            content: attr(data-tooltip)
+            background: $color-front
+            border-radius: 2px
+            color: $color-back
+            font-family: inherit
+            font-size: 1.3rem
+            line-height: 1.25
+            opacity: 0
+            padding: 0.5em 0.75em
+            transform: translateX(-50%) translateY(-2px)
+            transition: opacity 0.1s ease-out, transform 0.1s ease-out
+            visibility: hidden
+            min-width: 200px
+            max-width: 300px
+            z-index: 200
+
+        &:hover:before
+            opacity: 1
+            transform: translateX(-50%) translateY(0)
+            visibility: visible
diff --git a/website/assets/css/style.sass b/website/assets/css/style.sass
index a8d2edad4..259d563c3 100644
--- a/website/assets/css/style.sass
+++ b/website/assets/css/style.sass
@@ -32,3 +32,4 @@ $theme: blue !default
 @import _components/navigation
 @import _components/sidebar
 @import _components/tables
+@import _components/tooltips