Placement auto for tooltips

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index ceb9bc04cca7cc08d26e1b236325c28a48ce153f..1d53b0470ddf6159bb9019e24db79ca4a8a96fe6 100644 (file)
--- 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 c45926eba98e2b0e5ec3a99aa86ba63a5751f603..172cb29ad30ecedebb0e03129abd1e795fe0b8ab 100644 (file)
--- 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 c62ce9779fe6242744d61100d16d5bf6d10a3b15..fe97fbbbd0d7a0886a0f5e52e2db156068277dc8 100644 (file)
--- 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;