Backport #29251

allow to pass popper.js configuration for tooltip/popover and dropdown

diff --git a/bundlesize.config.json b/bundlesize.config.json
index b923dfb12ea2a303b57f1c5a830b0c97ba2dbe99..8c33e3abb737857f9994976b71965956bfe5bf61 100644 (file)
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",
-      "maxSize": "22 kB"
+      "maxSize": "22.25 kB"
     },
     {
       "path": "./dist/js/bootstrap.js",

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 1121a9819e844b90b4e96c0f8cbe0ae5a51907f1..c064c3461a1abe6f171679713835203e2ffdd9ac 100644 (file)
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -71,19 +71,21 @@ const AttachmentMap = {
 }
 
 const Default = {
-  offset    : 0,
-  flip      : true,
-  boundary  : 'scrollParent',
-  reference : 'toggle',
-  display   : 'dynamic'
+  offset       : 0,
+  flip         : true,
+  boundary     : 'scrollParent',
+  reference    : 'toggle',
+  display      : 'dynamic',
+  popperConfig : null
 }
 
 const DefaultType = {
-  offset    : '(number|string|function)',
-  flip      : 'boolean',
-  boundary  : '(string|element)',
-  reference : '(string|element)',
-  display   : 'string'
+  offset       : '(number|string|function)',
+  flip         : 'boolean',
+  boundary     : '(string|element)',
+  reference    : '(string|element)',
+  display      : 'string',
+  popperConfig : '(null|object)'
 }
 
 /**
@@ -359,7 +361,10 @@ class Dropdown {
       }
     }
 
-    return popperConfig
+    return {
+      ...popperConfig,
+      ...this._config.popperConfig
+    }
   }
 
   // Static

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index b200656658a60dec19827524674a706ef8b6d9a5..3bd495033e378145582aeb2835e40613798880e7 100644 (file)
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -43,7 +43,8 @@ const DefaultType = {
   boundary          : '(string|element)',
   sanitize          : 'boolean',
   sanitizeFn        : '(null|function)',
-  whiteList         : 'object'
+  whiteList         : 'object',
+  popperConfig      : '(null|object)'
 }
 
 const AttachmentMap = {
@@ -71,7 +72,8 @@ const Default = {
   boundary          : 'scrollParent',
   sanitize          : true,
   sanitizeFn        : null,
-  whiteList         : DefaultWhitelist
+  whiteList         : DefaultWhitelist,
+  popperConfig      : null
 }
 
 const HoverState = {
@@ -119,10 +121,6 @@ const Trigger = {
 
 class Tooltip {
   constructor(element, config) {
-    /**
-     * Check for Popper dependency
-     * Popper - https://popper.js.org
-     */
     if (typeof Popper === 'undefined') {
       throw new TypeError('Bootstrap\'s tooltips require Popper.js (https://popper.js.org/)')
     }
@@ -236,7 +234,7 @@ class Tooltip {
     this._timeout       = null
     this._hoverState    = null
     this._activeTrigger = null
-    if (this._popper !== null) {
+    if (this._popper) {
       this._popper.destroy()
     }
 
@@ -293,27 +291,7 @@ class Tooltip {
 
       $(this.element).trigger(this.constructor.Event.INSERTED)
 
-      this._popper = new Popper(this.element, tip, {
-        placement: attachment,
-        modifiers: {
-          offset: this._getOffset(),
-          flip: {
-            behavior: this.config.fallbackPlacement
-          },
-          arrow: {
-            element: Selector.ARROW
-          },
-          preventOverflow: {
-            boundariesElement: this.config.boundary
-          }
-        },
-        onCreate: (data) => {
-          if (data.originalPlacement !== data.placement) {
-            this._handlePopperPlacementChange(data)
-          }
-        },
-        onUpdate: (data) => this._handlePopperPlacementChange(data)
-      })
+      this._popper = new Popper(this.element, tip, this._getPopperConfig(attachment))
 
       $(tip).addClass(ClassName.SHOW)
 
@@ -468,6 +446,35 @@ class Tooltip {
 
   // Private
 
+  _getPopperConfig(attachment) {
+    const defaultBsConfig = {
+      placement: attachment,
+      modifiers: {
+        offset: this._getOffset(),
+        flip: {
+          behavior: this.config.fallbackPlacement
+        },
+        arrow: {
+          element: Selector.ARROW
+        },
+        preventOverflow: {
+          boundariesElement: this.config.boundary
+        }
+      },
+      onCreate: (data) => {
+        if (data.originalPlacement !== data.placement) {
+          this._handlePopperPlacementChange(data)
+        }
+      },
+      onUpdate: (data) => this._handlePopperPlacementChange(data)
+    }
+
+    return {
+      ...defaultBsConfig,
+      ...this.config.popperConfig
+    }
+  }
+
   _getOffset() {
     const offset = {}
 

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index 346b1a2e5ac80f5f054ca4678b25cd416a5a6d47..85ebc0ed25795ced76dea1af6bdbacb9035390a4 100644 (file)
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -1480,4 +1480,30 @@ $(function () {
     assert.strictEqual(offset.offset, myOffset)
     assert.ok(typeof offset.fn === 'undefined')
   })
+
+  QUnit.test('should allow to pass config to popper.js with `popperConfig`', function (assert) {
+    assert.expect(1)
+
+    var dropdownHTML =
+      '<div class="dropdown">' +
+      '  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+      '  <div class="dropdown-menu">' +
+      '    <a class="dropdown-item" href="#">Another link</a>' +
+      '  </div>' +
+      '</div>'
+
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown({
+        popperConfig: {
+          placement: 'left'
+        }
+      })
+
+    var dropdown = $dropdown.data('bs.dropdown')
+    var popperConfig = dropdown._getPopperConfig()
+
+    assert.strictEqual(popperConfig.placement, 'left')
+  })
 })

diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index e66450fb8572458e8e3552dfc9c9fc557fa3d2e4..2149a689163ebee2de93aad1e257d13f32885d41 100644 (file)
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -1266,4 +1266,21 @@ $(function () {
 
     assert.strictEqual(tooltip.config.sanitize, true)
   })
+
+  QUnit.test('should allow to pass config to popper.js with `popperConfig`', function (assert) {
+    assert.expect(1)
+
+    var $trigger = $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip"/>')
+      .appendTo('#qunit-fixture')
+      .bootstrapTooltip({
+        popperConfig: {
+          placement: 'left'
+        }
+      })
+
+    var tooltip = $trigger.data('bs.tooltip')
+    var popperConfig = tooltip._getPopperConfig('top')
+
+    assert.strictEqual(popperConfig.placement, 'left')
+  })
 })

diff --git a/site/docs/4.3/components/dropdowns.md b/site/docs/4.3/components/dropdowns.md
index 417d9f5eab66549bd8aa024b13f8c03345675038..736e58165014bbd6726ea741274f2850b9e0199b 100644 (file)
--- a/site/docs/4.3/components/dropdowns.md
+++ b/site/docs/4.3/components/dropdowns.md
@@ -875,6 +875,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>'dynamic'</td>
       <td>By default, we use Popper.js for dynamic positioning. Disable this with <code>static</code>.</td>
     </tr>
+    <tr>
+      <td>popperConfig</td>
+      <td>null | object</td>
+      <td>null</td>
+      <td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/popper-documentation.html#Popper.Defaults">Popper.js's configuration</a></td>
+    </tr>
   </tbody>
 </table>
 

diff --git a/site/docs/4.3/components/popovers.md b/site/docs/4.3/components/popovers.md
index e48768c8c0442ad330e6d79ac3b38a72bcafe3c9..44d2a321bc5c0b9752a45b8ae11b166fc41e2dd5 100644 (file)
--- a/site/docs/4.3/components/popovers.md
+++ b/site/docs/4.3/components/popovers.md
@@ -284,6 +284,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
       <td>null</td>
       <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>
     </tr>
+    <tr>
+      <td>popperConfig</td>
+      <td>null | object</td>
+      <td>null</td>
+      <td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/popper-documentation.html#Popper.Defaults">Popper.js's configuration</a></td>
+    </tr>
   </tbody>
 </table>
 

diff --git a/site/docs/4.3/components/tooltips.md b/site/docs/4.3/components/tooltips.md
index c58a7c00cf50be70d59ca6392c0d4772e3c7011a..692819fa38ff0166e55fc33262421640b618c08c 100644 (file)
--- a/site/docs/4.3/components/tooltips.md
+++ b/site/docs/4.3/components/tooltips.md
@@ -276,6 +276,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
       <td>null</td>
       <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>
     </tr>
+    <tr>
+      <td>popperConfig</td>
+      <td>null | object</td>
+      <td>null</td>
+      <td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/popper-documentation.html#Popper.Defaults">Popper.js's configuration</a></td>
+    </tr>
   </tbody>
 </table>