diff --git a/scss/utilities/_tooltip.scss b/scss/utilities/_tooltip.scss
index 06de430d..f323e41c 100644
--- a/scss/utilities/_tooltip.scss
+++ b/scss/utilities/_tooltip.scss
@@ -1,6 +1,6 @@
 /**
- * Tooltip ([data-tooltip])
- */
+* Tooltip ([data-tooltip])
+*/
 
 [data-tooltip] {
   position: relative;
@@ -11,6 +11,8 @@
     cursor: help;
   }
 
+  &[placement=top]::before,
+  &[placement=top]::after,
   &::before,
   &::after {
     display: block;
@@ -34,8 +36,8 @@
     opacity: 0;
     pointer-events: none;
   }
-
   // Caret
+  &[placement=top]::after,
   &::after {
     padding: 0;
     transform: translate(-50%, 0rem);
@@ -47,6 +49,49 @@
     content: "";
     color: var(--tooltip-background-color);
   }
+  &[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;
+    }
+  }
+  &[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;
+    }
+  }
+  &[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,
@@ -60,16 +105,60 @@
   // Animations, excluding touch devices
   @if $enable-transitions {
     @media (hover: hover) and (pointer: fine) {
+      &[placement=bottom]:focus,
+      &[placement=bottom]:hover
       &:focus,
       &:hover {
         &::before,
         &::after {
           animation-duration: .2s;
-          animation-name: slide;
+          animation-name: slide-top;
         }
 
         &::after {
-          animation-name: slideCaret; 
+          animation-name: slideCaret-top; 
+        }
+      }
+      &[placement=bottom] {
+        &:focus,
+        &:hover {
+          &::before,
+          &::after {
+            animation-duration: .2s;
+            animation-name: slide-bottom;
+          }
+  
+          &::after {
+            animation-name: slideCaret-bottom; 
+          }
+        }
+      }
+      &[placement=left] {
+        &:focus,
+        &:hover {
+          &::before,
+          &::after {
+            animation-duration: .2s;
+            animation-name: slide-left;
+          }
+  
+          &::after {
+            animation-name: slideCaret-left; 
+          }
+        }
+      }
+      &[placement=right] {
+        &:focus,
+        &:hover {
+          &::before,
+          &::after {
+            animation-duration: .2s;
+            animation-name: slide-right;
+          }
+  
+          &::after {
+            animation-name: slideCaret-right; 
+          }
         }
       }
     }
@@ -78,7 +167,7 @@
 
 // Animations
 @if $enable-transitions {
-  @keyframes slide {
+  @keyframes slide-top {
     from {
       transform: translate(-50%, .75rem);
       opacity: 0;
@@ -88,8 +177,7 @@
       opacity: 1;
     }
   }
-
-  @keyframes slideCaret {
+  @keyframes slideCaret-top {
     from {
       opacity: 0;
     }
@@ -102,4 +190,76 @@
       opacity: 1;
     }
   }
+
+  @keyframes slide-bottom {
+    from {
+      transform: translate(-50%, -.75rem);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-50%, .25rem);
+      opacity: 1;
+    }
+  }
+  @keyframes slideCaret-bottom {
+    from {
+      opacity: 0;
+    }
+    50% {
+      transform: translate(-50%, -.5rem);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-50%, -.3rem);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-left {
+    from {
+      transform: translate(.75rem, -50%);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-.25rem, -50%);
+      opacity: 1;
+    }
+  }
+  @keyframes slideCaret-left {
+    from {
+      opacity: 0;
+    }
+    50% {
+      transform: translate(.05rem, -50%);
+      opacity: 0;
+    }
+    to {
+      transform: translate(.3rem, -50%);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-right {
+    from {
+      transform: translate(-.75rem, -50%);
+      opacity: 0;
+    }
+    to {
+      transform: translate(.25rem, -50%);
+      opacity: 1;
+    }
+  }
+  @keyframes slideCaret-right {
+    from {
+      opacity: 0;
+    }
+    50% {
+      transform: translate(-.05rem, -50%);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-.3rem, -50%);
+      opacity: 1;
+    }
+  }
 }