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 <xhmikosr@gmail.com>

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 103524b8b49f04df4507d2782dd3c0a9ea28427d..63a30cf2fbd2e120e9fa3a29d94dbd2c5caa6c7f 100644 (file)
--- a/js/src/tooltip.js
+++ b/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: {

diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md
index 0b468833d42d5e8d9552ae6cf3103854aa6b1274..0c6118790c60d3e974b8b7fd35048bd7c0496e7f 100644 (file)
--- a/site/content/docs/5.0/components/popovers.md
+++ b/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>

diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md
index 6f0bde9dc9e085419c7990d67a48d0e90c920df0..21becc626049f58b57a51a96c252e0246a22f5ee 100644 (file)
--- a/site/content/docs/5.0/components/tooltips.md
+++ b/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>

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index c32dcfab920106de026545af7b00934b6d3ab75a..05bf4770588f4c8e0742c0e3aea2f242b87a15f2 100644 (file)
--- a/site/content/docs/5.0/migration.md
+++ b/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