mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
allow to pass popper.js configuration for tooltip/popover and dropdown
This commit is contained in:
+40
-28
@@ -56,7 +56,8 @@ const DefaultType = {
|
||||
boundary: '(string|element)',
|
||||
sanitize: 'boolean',
|
||||
sanitizeFn: '(null|function)',
|
||||
whiteList: 'object'
|
||||
whiteList: 'object',
|
||||
popperConfig: '(null|object)'
|
||||
}
|
||||
|
||||
const AttachmentMap = {
|
||||
@@ -84,7 +85,8 @@ const Default = {
|
||||
boundary: 'scrollParent',
|
||||
sanitize: true,
|
||||
sanitizeFn: null,
|
||||
whiteList: DefaultWhitelist
|
||||
whiteList: DefaultWhitelist,
|
||||
popperConfig: null
|
||||
}
|
||||
|
||||
const HoverState = {
|
||||
@@ -129,10 +131,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)')
|
||||
}
|
||||
@@ -247,7 +245,7 @@ class Tooltip {
|
||||
this._timeout = null
|
||||
this._hoverState = null
|
||||
this._activeTrigger = null
|
||||
if (this._popper !== null) {
|
||||
if (this._popper) {
|
||||
this._popper.destroy()
|
||||
}
|
||||
|
||||
@@ -301,27 +299,7 @@ class Tooltip {
|
||||
|
||||
EventHandler.trigger(this.element, this.constructor.Event.INSERTED)
|
||||
|
||||
this._popper = new Popper(this.element, tip, {
|
||||
placement: attachment,
|
||||
modifiers: {
|
||||
offset: this._getOffset(),
|
||||
flip: {
|
||||
behavior: this.config.fallbackPlacement
|
||||
},
|
||||
arrow: {
|
||||
element: `.${this.constructor.NAME}-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.classList.add(ClassName.SHOW)
|
||||
|
||||
@@ -482,6 +460,40 @@ class Tooltip {
|
||||
|
||||
// Private
|
||||
|
||||
_getPopperConfig(attachment) {
|
||||
const defaultBsConfig = {
|
||||
placement: attachment,
|
||||
modifiers: {
|
||||
offset: this._getOffset(),
|
||||
flip: {
|
||||
behavior: this.config.fallbackPlacement
|
||||
},
|
||||
arrow: {
|
||||
element: `.${this.constructor.NAME}-arrow`
|
||||
},
|
||||
preventOverflow: {
|
||||
boundariesElement: this.config.boundary
|
||||
}
|
||||
},
|
||||
onCreate: data => {
|
||||
if (data.originalPlacement !== data.placement) {
|
||||
this._handlePopperPlacementChange(data)
|
||||
}
|
||||
},
|
||||
onUpdate: data => this._handlePopperPlacementChange(data)
|
||||
}
|
||||
|
||||
let resultConfig = defaultBsConfig
|
||||
if (this.config.popperConfig) {
|
||||
resultConfig = {
|
||||
...defaultBsConfig,
|
||||
...this.config.popperConfig
|
||||
}
|
||||
}
|
||||
|
||||
return resultConfig
|
||||
}
|
||||
|
||||
_addAttachmentClass(attachment) {
|
||||
this.getTipElement().classList.add(`${CLASS_PREFIX}-${attachment}`)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user