diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index ceb9bc04cc..1d53b0470d 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -51,6 +51,7 @@ const Tooltip = (($) => {
   }
 
   const AttachmentMap = {
+    AUTO   : 'auto',
     TOP    : 'top',
     RIGHT  : 'right',
     BOTTOM : 'bottom',
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index c45926eba9..172cb29ad3 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -28,6 +28,9 @@
       <hr>
 
       <p>
+        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="auto" title="Tooltip on auto">
+          Tooltip on auto
+        </button>
         <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
           Tooltip on top
         </button>
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index c62ce9779f..fe97fbbbd0 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -74,6 +74,20 @@
       border-left-color: $tooltip-arrow-color;
     }
   }
+  &.bs-tooltip-auto {
+    &[x-placement^="top"] {
+      @extend .bs-tooltip-top;
+    }
+    &[x-placement^="right"] {
+      @extend .bs-tooltip-right;
+    }
+    &[x-placement^="bottom"] {
+      @extend .bs-tooltip-bottom;
+    }
+    &[x-placement^="left"] {
+      @extend .bs-tooltip-left;
+    }
+  }
 
   .arrow::before {
     position: absolute;