diff --git a/bundlesize.config.json b/bundlesize.config.json index b923dfb12e..8c33e3abb7 100644 --- 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 1121a9819e..c064c3461a 100644 --- 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 b200656658..3bd495033e 100644 --- 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 346b1a2e5a..85ebc0ed25 100644 --- 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 = + '' + + 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 e66450fb85..2149a68916 100644 --- 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 = $('') + .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 417d9f5eab..736e581650 100644 --- 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 'dynamic' By default, we use Popper.js for dynamic positioning. Disable this with static. + + popperConfig + null | object + null + To change Bootstrap's default Popper.js config, see Popper.js's configuration + diff --git a/site/docs/4.3/components/popovers.md b/site/docs/4.3/components/popovers.md index e48768c8c0..44d2a321bc 100644 --- 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 null Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. + + popperConfig + null | object + null + To change Bootstrap's default Popper.js config, see Popper.js's configuration + diff --git a/site/docs/4.3/components/tooltips.md b/site/docs/4.3/components/tooltips.md index c58a7c00cf..692819fa38 100644 --- 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 null Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. + + popperConfig + null | object + null + To change Bootstrap's default Popper.js config, see Popper.js's configuration +