Tooltip/popover - change the default value for fallbackPlacements (#…

…32437)

The default Popper `fallbackPlacements` value is `[oppositePlacement]`.

- The default value was previously (in v4) `'flip'` that can be achieved by passing the single value in the array, like — `[oppositePlacement]`. Keeping `null` also sets the `fallbackPlacements` to `[oppositePlacement]` (Default value in Popper)
- It's better to have **clockwise** (`['top', 'right', 'bottom', 'left']`) fallback options so that tooltip/popover can be placed to another side even if the opposite placement doesn't fit.

Co-authored-by: XhmikosR <[email protected]>

js/src/tooltip.js

@@ -51,7 +51,7 @@ const DefaultType = {
   selector: '(string|boolean)',
   placement: '(string|function)',
   container: '(string|element|boolean)',
-  fallbackPlacements: '(null|array)',
+  fallbackPlacements: 'array',
   boundary: '(string|element)',
   customClass: '(string|function)',
   sanitize: 'boolean',
@@ -81,7 +81,7 @@ const Default = {
   selector: false,
   placement: 'top',
   container: false,
-  fallbackPlacements: null,
+  fallbackPlacements: ['top', 'right', 'bottom', 'left'],
   boundary: 'clippingParents',
   customClass: '',
   sanitize: true,
@@ -466,22 +466,16 @@ class Tooltip extends BaseComponent {
   // Private
 
   _getPopperConfig(attachment) {
-    const flipModifier = {
-      name: 'flip',
-      options: {
-        altBoundary: true,
-        fallbackPlacements: ['top', 'right', 'bottom', 'left']
-      }
-    }
-
-    if (this.config.fallbackPlacements) {
-      flipModifier.options.fallbackPlacements = this.config.fallbackPlacements
-    }
-
     const defaultBsConfig = {
       placement: attachment,
       modifiers: [
-        flipModifier,
+        {
+          name: 'flip',
+          options: {
+            altBoundary: true,
+            fallbackPlacements: this.config.fallbackPlacements
+          }
+        },
         {
           name: 'preventOverflow',
           options: {

site/content/docs/5.0/components/popovers.md

@@ -249,9 +249,9 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
     </tr>
     <tr>
       <td><code>fallbackPlacements</code></td>
-      <td>string | array</td>
-      <td><code>'flip'</code></td>
-      <td>Allow to specify which position Popper will use on fallback. For more information refer to
+      <td>array</td>
+      <td><code>['top', 'right', 'bottom', 'left']</code></td>
+      <td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to
       Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td>
     </tr>
     <tr>

site/content/docs/5.0/components/tooltips.md

@@ -254,9 +254,9 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
     </tr>
     <tr>
       <td><code>fallbackPlacements</code></td>
-      <td>null | array</td>
-      <td><code>null</code></td>
-      <td>Allow to specify which position Popper will use on fallback. For more information refer to
+      <td>array</td>
+      <td><code>['top', 'right', 'bottom', 'left']</code></td>
+      <td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to
       Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td>
     </tr>
     <tr>

site/content/docs/5.0/migration.md

@@ -7,6 +7,12 @@ aliases: "/migration/"
 toc: true
 ---
 
+## v5.0.0-beta2
+
+### JavaScript
+
+- The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements.
+
 ## v5.0.0-beta1
 
 ### RTL