Add fallbackPlacement option for Tooltip and Popover

2 files changed, 32 insertions, 26 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 71247728a3..1da2098ddf 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 d50ddbb3e8..eb517252e0 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) => {