mirror of https://github.com/twbs/bootstrap.git
Merge eac65566da into 99a0dc628a
This commit is contained in:
719media
GitHub
commit
3da84f8a14
|
|
@ -74,7 +74,8 @@ const Default = {
|
|||
display: 'dynamic',
|
||||
offset: [0, 2],
|
||||
popperConfig: null,
|
||||
reference: 'toggle'
|
||||
reference: 'toggle',
|
||||
strategy: 'absolute'
|
||||
}
|
||||
|
||||
const DefaultType = {
|
||||
|
|
@ -83,7 +84,8 @@ const DefaultType = {
|
|||
display: 'string',
|
||||
offset: '(array|string|function)',
|
||||
popperConfig: '(null|object|function)',
|
||||
reference: '(string|element|object)'
|
||||
reference: '(string|element|object)',
|
||||
strategy: 'string'
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -306,7 +308,8 @@ class Dropdown extends BaseComponent {
|
|||
options: {
|
||||
offset: this._getOffset()
|
||||
}
|
||||
}]
|
||||
}],
|
||||
strategy: this._config.strategy
|
||||
}
|
||||
|
||||
// Disable Popper if we have a static display or Dropdown is in Navbar
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ const Default = {
|
|||
sanitize: true,
|
||||
sanitizeFn: null,
|
||||
selector: false,
|
||||
strategy: 'absolute',
|
||||
template: '<div class="tooltip" role="tooltip">' +
|
||||
'<div class="tooltip-arrow"></div>' +
|
||||
'<div class="tooltip-inner"></div>' +
|
||||
|
|
@ -93,6 +94,7 @@ const DefaultType = {
|
|||
sanitize: 'boolean',
|
||||
sanitizeFn: '(null|function)',
|
||||
selector: '(string|boolean)',
|
||||
strategy: 'string',
|
||||
template: 'string',
|
||||
title: '(string|element|function)',
|
||||
trigger: 'string'
|
||||
|
|
@ -432,7 +434,8 @@ class Tooltip extends BaseComponent {
|
|||
this._getTipElement().setAttribute('data-popper-placement', data.state.placement)
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
strategy: this._config.strategy
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -178,6 +178,58 @@ describe('Dropdown', () => {
|
|||
}))
|
||||
expect(popperConfig.placement).toEqual('left')
|
||||
})
|
||||
|
||||
it('should reflect strategy option in the constructor', () => {
|
||||
return new Promise(resolve => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div class="dropdown">',
|
||||
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
|
||||
' <div class="dropdown-menu">',
|
||||
' <a class="dropdown-item" href="#">Link</a>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
|
||||
const dropdown = new Dropdown(btnDropdown, {
|
||||
strategy: 'fixed'
|
||||
})
|
||||
|
||||
btnDropdown.addEventListener('shown.bs.dropdown', () => {
|
||||
const dropdownMenu = document.querySelector('.dropdown-menu')
|
||||
expect(dropdownMenu).not.toBeNull()
|
||||
expect(dropdownMenu.computedStyleMap().get('position').value).toEqual('fixed')
|
||||
resolve()
|
||||
})
|
||||
|
||||
dropdown.toggle()
|
||||
})
|
||||
})
|
||||
|
||||
it('should reflect strategy option in data attribute', () => {
|
||||
return new Promise(resolve => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div class="dropdown">',
|
||||
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-strategy="fixed">Dropdown</button>',
|
||||
' <div class="dropdown-menu">',
|
||||
' <a class="dropdown-item" href="#">Link</a>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
|
||||
const dropdown = new Dropdown(btnDropdown)
|
||||
|
||||
btnDropdown.addEventListener('shown.bs.dropdown', () => {
|
||||
const dropdownMenu = document.querySelector('.dropdown-menu')
|
||||
expect(dropdownMenu).not.toBeNull()
|
||||
expect(dropdownMenu.computedStyleMap().get('position').value).toEqual('fixed')
|
||||
resolve()
|
||||
})
|
||||
|
||||
dropdown.toggle()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('toggle', () => {
|
||||
|
|
|
|||
|
|
@ -959,6 +959,44 @@ describe('Tooltip', () => {
|
|||
tooltip.show()
|
||||
})
|
||||
})
|
||||
|
||||
it('should reflect strategy option in the constructor', () => {
|
||||
return new Promise(resolve => {
|
||||
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
|
||||
|
||||
const tooltipEl = fixtureEl.querySelector('a')
|
||||
const tooltip = new Tooltip(tooltipEl, {
|
||||
strategy: 'fixed'
|
||||
})
|
||||
|
||||
tooltipEl.addEventListener('shown.bs.tooltip', () => {
|
||||
const tip = document.querySelector('.tooltip')
|
||||
expect(tip).not.toBeNull()
|
||||
expect(tip.computedStyleMap().get('position').value).toEqual('fixed')
|
||||
resolve()
|
||||
})
|
||||
|
||||
tooltip.show()
|
||||
})
|
||||
})
|
||||
|
||||
it('should reflect strategy option in data attribute', () => {
|
||||
return new Promise(resolve => {
|
||||
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip" data-bs-strategy="fixed"></a>'
|
||||
|
||||
const tooltipEl = fixtureEl.querySelector('a')
|
||||
const tooltip = new Tooltip(tooltipEl)
|
||||
|
||||
tooltipEl.addEventListener('shown.bs.tooltip', () => {
|
||||
const tip = document.querySelector('.tooltip')
|
||||
expect(tip).not.toBeNull()
|
||||
expect(tip.computedStyleMap().get('position').value).toEqual('fixed')
|
||||
resolve()
|
||||
})
|
||||
|
||||
tooltip.show()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('hide', () => {
|
||||
|
|
|
|||
|
|
@ -1082,6 +1082,7 @@ const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootst
|
|||
| `offset` | array, string, function | `[0, 2]` | Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
|
||||
| `reference` | string, element, object | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). |
|
||||
| `strategy` | string | `'absolute'` | Describes the positioning strategy to use. Accepts the values of `'absolute'` and `'fixed'`. For more information refer to Popper's [strategy docs](https://popper.js.org/docs/v2/constructors/#strategy). |
|
||||
{{< /bs-table >}}
|
||||
|
||||
#### Using function with `popperConfig`
|
||||
|
|
|
|||
|
|
@ -198,6 +198,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
|
|||
| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
|
||||
| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
|
||||
| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
|
||||
| `strategy` | string | `'absolute'` | Describes the positioning strategy to use. Accepts the values of `'absolute'` and `'fixed'`. For more information refer to Popper's [strategy docs](https://popper.js.org/docs/v2/constructors/#strategy). |
|
||||
| `template` | string | `'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-header`. The popover's `content` will be injected into the `.popover-body`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
|
||||
| `title` | string, element, function | `''` | The popover title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
|
||||
| `trigger` | string | `'click'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
|
||||
|
|
|
|||
|
|
@ -211,6 +211,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
|
|||
| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
|
||||
| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
|
||||
| `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
|
||||
| `strategy` | string | `'absolute'` | Describes the positioning strategy to use. Accepts the values of `'absolute'` and `'fixed'`. For more information refer to Popper's [strategy docs](https://popper.js.org/docs/v2/constructors/#strategy). |
|
||||
| `template` | string | `'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'` | Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. |
|
||||
| `title` | string, element, function | `''` | The tooltip title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
|
||||
| `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
|
||||
|
|
|
|||
Loading…
Reference in New Issue