Backport #29251

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

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",

js/src/dropdown.js

@@ -71,19 +71,21 @@ const AttachmentMap = {
 }
 
 const Default = {
-  offset    : 0,
+  offset       : 0,
-  flip      : true,
+  flip         : true,
-  boundary  : 'scrollParent',
+  boundary     : 'scrollParent',
-  reference : 'toggle',
+  reference    : 'toggle',
-  display   : 'dynamic'
+  display      : 'dynamic',
+  popperConfig : null
 }
 
 const DefaultType = {
-  offset    : '(number|string|function)',
+  offset       : '(number|string|function)',
-  flip      : 'boolean',
+  flip         : 'boolean',
-  boundary  : '(string|element)',
+  boundary     : '(string|element)',
-  reference : '(string|element)',
+  reference    : '(string|element)',
-  display   : 'string'
+  display      : 'string',
+  popperConfig : '(null|object)'
 }
 
 /**
@@ -359,7 +361,10 @@ class Dropdown {
       }
     }
 
-    return popperConfig
+    return {
+      ...popperConfig,
+      ...this._config.popperConfig
+    }
   }
 
   // Static

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, {
+      this._popper = new Popper(this.element, tip, this._getPopperConfig(attachment))
-        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)
-      })
 
       $(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 = {}
 

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')
+  })
 })

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')
+  })
 })

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>
 

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>
 

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>