diff --git a/docs/components/popovers.md b/docs/components/popovers.md index bc3f9333f7..e73f17d464 100644 --- a/docs/components/popovers.md +++ b/docs/components/popovers.md @@ -264,6 +264,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap 0 Offset of the popover relative to its target. For more information refer to Popper.js's offset docs. + + fallbackPlacement + string | array + ['top', 'right', 'bottom', 'left'] + Allow to specify which position Popper will use on fallback. For more information refer to + Popper.js's behavior docs + diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index 85e5385f56..7b3133c0e2 100644 --- a/docs/components/tooltips.md +++ b/docs/components/tooltips.md @@ -242,6 +242,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap 0 Offset of the tooltip relative to its target. For more information refer to Popper.js's offset docs. + + fallbackPlacement + string | array + ['top', 'right', 'bottom', 'left'] + Allow to specify which position Popper will use on fallback. For more information refer to + Popper.js's behavior docs + diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 71247728a3..1da2098ddf 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -157,7 +157,8 @@ const Dropdown = (($) => { offset : context._config.offset }, flip : { - enabled : context._config.flip + enabled : context._config.flip, + behavior : [AttachmentMap.TOP, AttachmentMap.BOTTOM] } } }) diff --git a/js/src/tooltip.js b/js/src/tooltip.js index d50ddbb3e8..eb517252e0 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -36,32 +36,18 @@ const Tooltip = (($) => { const CLASS_PREFIX = 'bs-tooltip' const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') - const Default = { - animation : true, - template : '', - trigger : 'hover focus', - title : '', - delay : 0, - html : false, - selector : false, - placement : 'top', - offset : 0, - container : false - } - const DefaultType = { - animation : 'boolean', - template : 'string', - title : '(string|element|function)', - trigger : 'string', - delay : '(number|object)', - html : 'boolean', - selector : '(string|boolean)', - placement : '(string|function)', - offset : '(number|string)', - container : '(string|element|boolean)' + animation : 'boolean', + template : 'string', + title : '(string|element|function)', + trigger : 'string', + delay : '(number|object)', + html : 'boolean', + selector : '(string|boolean)', + placement : '(string|function)', + offset : '(number|string)', + container : '(string|element|boolean)', + fallbackPlacement : '(string|array)' } const AttachmentMap = { @@ -71,6 +57,22 @@ const Tooltip = (($) => { LEFT : 'left' } + const Default = { + animation : true, + template : '', + trigger : 'hover focus', + title : '', + delay : 0, + html : false, + selector : false, + placement : 'top', + offset : 0, + container : false, + fallbackPlacement : [AttachmentMap.TOP, AttachmentMap.RIGHT, AttachmentMap.BOTTOM, AttachmentMap.LEFT] + } + const HoverState = { SHOW : 'show', OUT : 'out' @@ -289,6 +291,9 @@ const Tooltip = (($) => { modifiers : { offset : { offset : this.config.offset + }, + flip : { + behavior : this.config.fallbackPlacement } }, onCreate : (data) => {