Add fallbackPlacement option for Tooltip and Popover

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>
 

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>
 

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]
           }
         }
       })

js/src/tooltip.js

@@ -36,6 +36,27 @@ const Tooltip = (($) => {
   const CLASS_PREFIX        = 'bs-tooltip'
   const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
 
+  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)',
+    fallbackPlacement   : '(string|array)'
+  }
+
+  const AttachmentMap = {
+    TOP    : 'top',
+    RIGHT  : 'right',
+    BOTTOM : 'bottom',
+    LEFT   : 'left'
+  }
+
   const Default = {
     animation           : true,
     template            : '<div class="tooltip" role="tooltip">'
@@ -48,27 +69,8 @@ const Tooltip = (($) => {
     selector            : false,
     placement           : 'top',
     offset              : 0,
-    container   : false
+    container           : false,
-  }
+    fallbackPlacement   : [AttachmentMap.TOP, AttachmentMap.RIGHT, AttachmentMap.BOTTOM, AttachmentMap.LEFT]
-
-  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)'
-  }
-
-  const AttachmentMap = {
-    TOP    : 'top',
-    RIGHT  : 'right',
-    BOTTOM : 'bottom',
-    LEFT   : 'left'
   }
 
   const HoverState = {
@@ -289,6 +291,9 @@ const Tooltip = (($) => {
           modifiers : {
             offset : {
               offset : this.config.offset
+            },
+            flip : {
+              behavior : this.config.fallbackPlacement
             }
           },
           onCreate : (data) => {