1 files changed, 278 insertions, 0 deletions
diff --git a/app/assets/stylesheets/utilities/_tooltip.scss b/app/assets/stylesheets/utilities/_tooltip.scss
new file mode 100644
index 0000000..d0355a3
--- /dev/null
+++ b/app/assets/stylesheets/utilities/_tooltip.scss
@@ -0,0 +1,278 @@
+/**
+ * Tooltip ([data-tooltip])
+ */
+
+[data-tooltip] {
+  position: relative;
+
+  &:not(a, button, input) {
+    border-bottom: 1px dotted;
+    text-decoration: none;
+    cursor: help;
+  }
+
+  &[data-placement="top"]::before,
+  &[data-placement="top"]::after,
+  &::before,
+  &::after {
+    display: block;
+    z-index: 99;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    padding: .25rem .5rem;
+    overflow: hidden;
+    transform: translate(-50%, -.25rem);
+    border-radius: var(--border-radius);
+    background: var(--tooltip-background-color);
+    content: attr(data-tooltip);
+    color: var(--tooltip-color);
+    font-style: normal;
+    font-weight: var(--font-weight);
+    font-size: .875rem;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+  }
+  
+  // Caret
+  &[data-placement="top"]::after,
+  &::after {
+    padding: 0;
+    transform: translate(-50%, 0rem);
+    border-top: .3rem solid;
+    border-right: .3rem solid transparent;
+    border-left: .3rem solid transparent;
+    border-radius: 0;
+    background-color: transparent;
+    content: "";
+    color: var(--tooltip-background-color);
+  }
+
+  &[data-placement="bottom"] {
+    &::before,
+    &::after {
+      top: 100%;
+      bottom: auto;
+      transform: translate(-50%, .25rem);
+    }
+    
+    &:after{
+      transform: translate(-50%, -.3rem);
+      border: .3rem solid transparent;
+      border-bottom: .3rem solid;
+    }
+  }
+
+  &[data-placement="left"] {
+    &::before,
+    &::after {
+      top: 50%;
+      right: 100%;
+      bottom: auto;
+      left: auto;
+      transform: translate(-.25rem, -50%);
+    }
+    
+    &:after{
+      transform: translate(.3rem, -50%);
+      border: .3rem solid transparent;
+      border-left: .3rem solid;
+    }
+  }
+
+  &[data-placement="right"] {
+    &::before,
+    &::after {
+      top: 50%;
+      right: auto;
+      bottom: auto;
+      left: 100%;
+      transform: translate(.25rem, -50%);
+    }
+    
+    &:after{
+      transform: translate(-.3rem, -50%);
+      border: .3rem solid transparent;
+      border-right: .3rem solid;
+    }
+  }
+
+  // Display
+  &:focus,
+  &:hover {
+    &::before,
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  
+  @if $enable-transitions {
+
+    // Animations, excluding touch devices
+    @media (hover: hover) and (pointer: fine) {
+      &[data-placement="bottom"]:focus,
+      &[data-placement="bottom"]:hover
+      &:focus,
+      &:hover {
+        &::before,
+        &::after {
+          animation-duration: .2s;
+          animation-name: tooltip-slide-top;
+        }
+
+        &::after {
+          animation-name: tooltip-caret-slide-top; 
+        }
+      }
+      
+      &[data-placement="bottom"] {
+        &:focus,
+        &:hover {
+          &::before,
+          &::after {
+            animation-duration: .2s;
+            animation-name: tooltip-slide-bottom;
+          }
+  
+          &::after {
+            animation-name: tooltip-caret-slide-bottom; 
+          }
+        }
+      }
+      
+      &[data-placement="left"] {
+        &:focus,
+        &:hover {
+          &::before,
+          &::after {
+            animation-duration: .2s;
+            animation-name: tooltip-slide-left;
+          }
+  
+          &::after {
+            animation-name: tooltip-caret-slide-left; 
+          }
+        }
+      }
+      
+      &[data-placement="right"] {
+        &:focus,
+        &:hover {
+          &::before,
+          &::after {
+            animation-duration: .2s;
+            animation-name: tooltip-slide-right;
+          }
+  
+          &::after {
+            animation-name: tooltip-caret-slide-right; 
+          }
+        }
+      }
+    }
+
+    @keyframes tooltip-slide-top {
+      from {
+        transform: translate(-50%, .75rem);
+        opacity: 0;
+      }
+      to {
+        transform: translate(-50%, -.25rem);
+        opacity: 1;
+      }
+    }
+    
+    @keyframes tooltip-caret-slide-top {
+      from {
+        opacity: 0;
+      }
+      50% {
+        transform: translate(-50%, -.25rem);
+        opacity: 0;
+      }
+      to {
+        transform: translate(-50%, 0rem);
+        opacity: 1;
+      }
+    }
+  
+    @keyframes tooltip-slide-bottom {
+      from {
+        transform: translate(-50%, -.75rem);
+        opacity: 0;
+      }
+      to {
+        transform: translate(-50%, .25rem);
+        opacity: 1;
+      }
+    }
+    
+    @keyframes tooltip-caret-slide-bottom {
+      from {
+        opacity: 0;
+      }
+      50% {
+        transform: translate(-50%, -.5rem);
+        opacity: 0;
+      }
+      to {
+        transform: translate(-50%, -.3rem);
+        opacity: 1;
+      }
+    }
+  
+    @keyframes tooltip-slide-left {
+      from {
+        transform: translate(.75rem, -50%);
+        opacity: 0;
+      }
+      to {
+        transform: translate(-.25rem, -50%);
+        opacity: 1;
+      }
+    }
+    
+    @keyframes tooltip-caret-slide-left {
+      from {
+        opacity: 0;
+      }
+      50% {
+        transform: translate(.05rem, -50%);
+        opacity: 0;
+      }
+      to {
+        transform: translate(.3rem, -50%);
+        opacity: 1;
+      }
+    }
+  
+    @keyframes tooltip-slide-right {
+      from {
+        transform: translate(-.75rem, -50%);
+        opacity: 0;
+      }
+      to {
+        transform: translate(.25rem, -50%);
+        opacity: 1;
+      }
+    }
+    
+    @keyframes tooltip-caret-slide-right {
+      from {
+        opacity: 0;
+      }
+      50% {
+        transform: translate(-.05rem, -50%);
+        opacity: 0;
+      }
+      to {
+        transform: translate(-.3rem, -50%);
+        opacity: 1;
+      }
+    }
+  }
+}