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) => {