Add tooltips component

2024-11-11 12:18:04 +03:00 · 2017-05-17 18:20:53 +02:00 · 2017-05-17 18:20:53 +02:00 · 841ad29f61
commit 841ad29f61
parent 8a415fc402
2 changed files with 30 additions and 0 deletions
--- a/website/assets/css/_components/_tooltips.sass
+++ 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
--- 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