Add fallbackPlacement option for Tooltip and Popover

4 files changed, 46 insertions, 26 deletions

diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index bc3f9333f..e73f17d46 100644
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@@ -264,6 +264,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>0</td>
       <td>Offset of the popover relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td>
     </tr>
+    <tr>
+      <td>fallbackPlacement</td>
+      <td>string | array</td>
+      <td>['top', 'right', 'bottom', 'left']</td>
+      <td>Allow to specify which position Popper will use on fallback. For more information refer to
+      Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">behavior docs</a></td>
+    </tr>
   </tbody>
 </table>
 
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index 85e5385f5..7b3133c0e 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -242,6 +242,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>0</td>
       <td>Offset of the tooltip relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td>
     </tr>
+    <tr>
+      <td>fallbackPlacement</td>
+      <td>string | array</td>
+      <td>['top', 'right', 'bottom', 'left']</td>
+      <td>Allow to specify which position Popper will use on fallback. For more information refer to
+      Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">behavior docs</a></td>
+    </tr>
   </tbody>
 </table>
 
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 71247728a..1da2098dd 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -157,7 +157,8 @@ const Dropdown = (($) => {
             offset : context._config.offset
           },
           flip : {
-            enabled : context._config.flip
+            enabled : context._config.flip,
+            behavior : [AttachmentMap.TOP, AttachmentMap.BOTTOM]
           }
         }
       })
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index d50ddbb3e..eb517252e 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -36,32 +36,18 @@ const Tooltip = (($) => {
   const CLASS_PREFIX        = 'bs-tooltip'
   const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
 
-  const Default = {
-    animation   : true,
-    template    : '<div class="tooltip" role="tooltip">'
-                + '<div class="arrow"></div>'
-                + '<div class="tooltip-inner"></div></div>',
-    trigger     : 'hover focus',
-    title       : '',
-    delay       : 0,
-    html        : false,
-    selector    : false,
-    placement   : 'top',
-    offset      : 0,
-    container   : false
-  }
-
   const DefaultType = {
-    animation   : 'boolean',
-    template    : 'string',
-    title       : '(string|element|function)',
-    trigger     : 'string',
-    delay       : '(number|object)',
-    html        : 'boolean',
-    selector    : '(string|boolean)',
-    placement   : '(string|function)',
-    offset      : '(number|string)',
-    container   : '(string|element|boolean)'
+    animation           : 'boolean',
+    template            : 'string',
+    title               : '(string|element|function)',
+    trigger             : 'string',
+    delay               : '(number|object)',
+    html                : 'boolean',
+    selector            : '(string|boolean)',
+    placement           : '(string|function)',
+    offset              : '(number|string)',
+    container           : '(string|element|boolean)',
+    fallbackPlacement   : '(string|array)'
   }
 
   const AttachmentMap = {
@@ -71,6 +57,22 @@ const Tooltip = (($) => {
     LEFT   : 'left'
   }
 
+  const Default = {
+    animation           : true,
+    template            : '<div class="tooltip" role="tooltip">'
+                        + '<div class="arrow"></div>'
+                        + '<div class="tooltip-inner"></div></div>',
+    trigger             : 'hover focus',
+    title               : '',
+    delay               : 0,
+    html                : false,
+    selector            : false,
+    placement           : 'top',
+    offset              : 0,
+    container           : false,
+    fallbackPlacement   : [AttachmentMap.TOP, AttachmentMap.RIGHT, AttachmentMap.BOTTOM, AttachmentMap.LEFT]
+  }
+
   const HoverState = {
     SHOW : 'show',
     OUT  : 'out'
@@ -289,6 +291,9 @@ const Tooltip = (($) => {
           modifiers : {
             offset : {
               offset : this.config.offset
+            },
+            flip : {
+              behavior : this.config.fallbackPlacement
             }
           },
           onCreate : (data) => {