Compare commits
7 commits
main
...
js-docs-tw
| Author | SHA1 | Date | |
|---|---|---|---|
|
296621c7f3 | ||
|
|
888b885ce1 | ||
|
|
e65de02404 | ||
|
|
020fa66ec2 | ||
|
|
fb2f3a418b | ||
|
60df5fc68b | ||
|
|
ec429d98f4 |
18 changed files with 359 additions and 1425 deletions
|
|
@ -24,15 +24,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Override Bootstrap defaults
|
// Override Bootstrap defaults
|
||||||
> .table {
|
> .table,
|
||||||
max-width: 100%;
|
> .table-responsive .table {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
@include font-size(.875rem);
|
@include font-size(.875rem);
|
||||||
|
|
||||||
@include media-breakpoint-down(lg) {
|
@include media-breakpoint-down(lg) {
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
|
||||||
|
|
||||||
&.table-bordered {
|
&.table-bordered {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -103,40 +103,13 @@ var bsAlert = new bootstrap.Alert(myAlert)
|
||||||
|
|
||||||
This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.)
|
This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.)
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Method | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th>Method</th>
|
| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. |
|
||||||
<th>Description</th>
|
| `dispose` | Destroys an element's alert. (Removes stored data on the DOM element) |
|
||||||
</tr>
|
| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element. For example: `bootstrap.Alert.getInstance(alert)`. |
|
||||||
</thead>
|
{{< /bs-table >}}
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>close</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Closes an alert by removing it from the DOM. If the <code>.fade</code> and <code>.show</code> classes are present on the element, the alert will fade out before it is removed.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>dispose</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Destroys an element's alert. (Removes stored data on the DOM element)
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>getInstance</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: <code>bootstrap.Alert.getInstance(alert)</code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var alertNode = document.querySelector('.alert')
|
var alertNode = document.querySelector('.alert')
|
||||||
|
|
@ -148,28 +121,12 @@ alert.close()
|
||||||
|
|
||||||
Bootstrap's alert plugin exposes a few events for hooking into alert functionality.
|
Bootstrap's alert plugin exposes a few events for hooking into alert functionality.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Event | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th>Event</th>
|
| `close.bs.alert` | Fires immediately when the `close` instance method is called. |
|
||||||
<th>Description</th>
|
| `closed.bs.alert` | Fired when the alert has been closed and CSS transitions have completed. |
|
||||||
</tr>
|
{{< /bs-table >}}
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>close.bs.alert</code></td>
|
|
||||||
<td>
|
|
||||||
Fires immediately when the <code>close</code> instance method is called.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>closed.bs.alert</code></td>
|
|
||||||
<td>
|
|
||||||
Fired when the alert has been closed and CSS transitions have completed.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var myAlert = document.getElementById('myAlert')
|
var myAlert = document.getElementById('myAlert')
|
||||||
|
|
|
||||||
|
|
@ -169,32 +169,12 @@ var button = document.getElementById('myButton')
|
||||||
var bsButton = new bootstrap.Button(button)
|
var bsButton = new bootstrap.Button(button)
|
||||||
```
|
```
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table "table bs-js-table" >}}
|
||||||
<thead>
|
| Method | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th>Method</th>
|
| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. |
|
||||||
<th>Description</th>
|
| `dispose` | Destroys an element's button. (Removes stored data on the DOM element) |
|
||||||
</tr>
|
{{< /bs-table >}}
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>toggle</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Toggles push state. Gives the button the appearance that it has been activated.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>dispose</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Destroys an element's button. (Removes stored data on the DOM element)
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
For example, to toggle all buttons
|
For example, to toggle all buttons
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -272,55 +272,16 @@ var carousel = new bootstrap.Carousel(myCarousel)
|
||||||
|
|
||||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-interval=""`.
|
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-interval=""`.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Name | Type | Default | Description |
|
||||||
<tr>
|
| --- | --- | --- | --- |
|
||||||
<th style="width: 100px;">Name</th>
|
| `interval` | number | `5000` | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
|
||||||
<th style="width: 50px;">Type</th>
|
| `keyboard` | boolean | `true` | Whether the carousel should react to keyboard events. |
|
||||||
<th style="width: 50px;">Default</th>
|
| `pause` | string, boolean | `"hover"` | If set to `"hover"`, pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. If set to `false`, hovering over the carousel won't pause it. On touch-enabled devices, when set to `"hover"`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. This is in addition to the mouse behavior. |
|
||||||
<th>Description</th>
|
| `slide` | string, boolean | `false` | Autoplays the carousel after the user manually cycles the first item. If `"carousel"`, autoplays the carousel on load. |
|
||||||
</tr>
|
| `wrap` | boolean | `true` | Whether the carousel should cycle continuously or have hard stops. |
|
||||||
</thead>
|
| `touch` | boolean | `true` | Whether the carousel should support left/right swipe interactions on touchscreen devices. |
|
||||||
<tbody>
|
{{< /bs-table >}}
|
||||||
<tr>
|
|
||||||
<td><code>interval</code></td>
|
|
||||||
<td>number</td>
|
|
||||||
<td><code>5000</code></td>
|
|
||||||
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>keyboard</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Whether the carousel should react to keyboard events.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>pause</code></td>
|
|
||||||
<td>string | boolean</td>
|
|
||||||
<td><code>"hover"</code></td>
|
|
||||||
<td><p>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p>
|
|
||||||
<p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>slide</code></td>
|
|
||||||
<td>string | boolean</td>
|
|
||||||
<td><code>false</code></td>
|
|
||||||
<td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>wrap</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Whether the carousel should cycle continuously or have hard stops.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>touch</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Whether the carousel should support left/right swipe interactions on touchscreen devices.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
|
|
||||||
|
|
@ -338,48 +299,18 @@ var carousel = new bootstrap.Carousel(myCarousel, {
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Method | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th>Method</th>
|
| `cycle` | Cycles through the carousel items from left to right. |
|
||||||
<th>Description</th>
|
| `pause` | Stops the carousel from cycling through items. |
|
||||||
</tr>
|
| `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
|
||||||
</thead>
|
| `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
|
||||||
<tbody>
|
| `nextWhenVisible` | Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. **Returns to the caller before the target item has been shown** |
|
||||||
<tr>
|
| `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
|
||||||
<td><code>cycle</code></td>
|
| `dispose` | Destroys an element's carousel. (Removes stored data on the DOM element) |
|
||||||
<td>Cycles through the carousel items from left to right.</td>
|
| `getInstance` | Static method which allows you to get the carousel instance associated with a DOM element. |
|
||||||
</tr>
|
{{< /bs-table >}}
|
||||||
<tr>
|
|
||||||
<td><code>pause</code></td>
|
|
||||||
<td>Stops the carousel from cycling through items.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>prev</code></td>
|
|
||||||
<td>Cycles to the previous item. <strong>Returns to the caller before the previous item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>next</code></td>
|
|
||||||
<td>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>nextWhenVisible</code></td>
|
|
||||||
<td>Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. <strong>Returns to the caller before the target item has been shown</strong>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>to</code></td>
|
|
||||||
<td>Cycles the carousel to a particular frame (0 based, similar to an array). <strong>Returns to the caller before the target item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>dispose</code></td>
|
|
||||||
<td>Destroys an element's carousel. (Removes stored data on the DOM element)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>getInstance</code></td>
|
|
||||||
<td>Static method which allows you to get the carousel instance associated with a DOM element.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -392,24 +323,12 @@ Bootstrap's carousel class exposes two events for hooking into carousel function
|
||||||
|
|
||||||
All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`).
|
All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`).
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Event type | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th style="width: 150px;">Event type</th>
|
| `slide.bs.carousel` | Fires immediately when the `slide` instance method is invoked. |
|
||||||
<th>Description</th>
|
| `slid.bs.carousel` | Fired when the carousel has completed its slide transition. |
|
||||||
</tr>
|
{{< /bs-table >}}
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>slide.bs.carousel</code></td>
|
|
||||||
<td>Fires immediately when the <code>slide</code> instance method is invoked.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>slid.bs.carousel</code></td>
|
|
||||||
<td>Fired when the carousel has completed its slide transition.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var myCarousel = document.getElementById('myCarousel')
|
var myCarousel = document.getElementById('myCarousel')
|
||||||
|
|
|
||||||
|
|
@ -108,30 +108,12 @@ var collapseList = collapseElementList.map(function (collapseEl) {
|
||||||
|
|
||||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-parent=""`.
|
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-parent=""`.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table "table bs-js-table" >}}
|
||||||
<thead>
|
| Name | Type | Default | Description |
|
||||||
<tr>
|
| --- | --- | --- | --- |
|
||||||
<th style="width: 100px;">Name</th>
|
`parent` | selector, jQuery object, DOM element | `false` | If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area. |
|
||||||
<th style="width: 50px;">Type</th>
|
`toggle` | boolean | `true` | Toggles the collapsible element on invocation |
|
||||||
<th style="width: 50px;">Default</th>
|
{{< /bs-table >}}
|
||||||
<th>Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>parent</code></td>
|
|
||||||
<td>selector | jQuery object | DOM element </td>
|
|
||||||
<td><code>false</code></td>
|
|
||||||
<td>If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>toggle</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Toggles the collapsible element on invocation</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
|
|
||||||
|
|
@ -150,67 +132,28 @@ var bsCollapse = new bootstrap.Collapse(myCollapse, {
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Method | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th>Method</th>
|
| `toggle` | Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). |
|
||||||
<th>Description</th>
|
| `show` | Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (e.g., before the `shown.bs.collapse` event occurs). |
|
||||||
</tr>
|
| `hide` | Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (e.g., before the `hidden.bs.collapse` event occurs). |
|
||||||
</thead>
|
| `dispose` | Destroys an element's collapse. (Removes stored data on the DOM element) |
|
||||||
<tbody>
|
| `getInstance` | Static method which allows you to get the collapse instance associated with a DOM element. |
|
||||||
<tr>
|
{{< /bs-table >}}
|
||||||
<td><code>toggle</code></td>
|
|
||||||
<td>Toggles a collapsible element to shown or hidden. <strong>Returns to the caller before the collapsible element has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.collapse</code> or <code>hidden.bs.collapse</code> event occurs).</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>show</code></td>
|
|
||||||
<td>Shows a collapsible element. <strong>Returns to the caller before the collapsible element has actually been shown</strong> (e.g., before the <code>shown.bs.collapse</code> event occurs). </td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hide</code></td>
|
|
||||||
<td>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (e.g., before the <code>hidden.bs.collapse</code> event occurs).</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>dispose</code></td>
|
|
||||||
<td>Destroys an element's collapse. (Removes stored data on the DOM element)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>getInstance</code></td>
|
|
||||||
<td>Static method which allows you to get the collapse instance associated with a DOM element.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
|
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Event type | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th style="width: 150px;">Event type</th>
|
| `show.bs.collapse` | This event fires immediately when the `show` instance method is called. |
|
||||||
<th>Description</th>
|
| `shown.bs.collapse` | This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). |
|
||||||
</tr>
|
| `hide.bs.collapse` | This event is fired immediately when the `hide` method has been called. |
|
||||||
</thead>
|
| `hidden.bs.collapse` | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |
|
||||||
<tbody>
|
{{< /bs-table >}}
|
||||||
<tr>
|
|
||||||
<td><code>show.bs.collapse</code></td>
|
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>shown.bs.collapse</code></td>
|
|
||||||
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hide.bs.collapse</code></td>
|
|
||||||
<td>This event is fired immediately when the <code>hide</code> method has been called.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hidden.bs.collapse</code></td>
|
|
||||||
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var myCollapsible = document.getElementById('myCollapsible')
|
var myCollapsible = document.getElementById('myCollapsible')
|
||||||
|
|
|
||||||
|
|
@ -857,157 +857,46 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d
|
||||||
|
|
||||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`.
|
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table "table bs-js-table" >}}
|
||||||
<thead>
|
| Name | Type | Default | Description |
|
||||||
<tr>
|
| --- | --- | --- | --- |
|
||||||
<th style="width: 100px;">Name</th>
|
| `offset` | number, string, function | `0` | Offset of the dropdown relative to its target. When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument. For more information refer to Popper's [offset docs](https://popper.js.org/docs/v1/#modifiers..offset.offset). |
|
||||||
<th style="width: 100px;">Type</th>
|
| `flip` | boolean | `true` | Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's [flip docs](https://popper.js.org/docs/v1/#modifiers..flip.enabled). |
|
||||||
<th style="width: 50px;">Default</th>
|
| `boundary` | string, element | `'scrollParent'` | Overflow constraint boundary of the dropdown menu. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper's [preventOverflow docs](https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement). |
|
||||||
<th>Description</th>
|
| `reference` | string, element | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, or an HTMLElement reference. For more information refer to Popper's [referenceObject docs](https://popper.js.org/docs/v1/#referenceObject). |
|
||||||
</tr>
|
| `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. |
|
||||||
</thead>
|
| `popperConfig` | null, object | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v1/#Popper.Defaults) |
|
||||||
<tbody>
|
{{< /bs-table >}}
|
||||||
<tr>
|
|
||||||
<td><code>offset</code></td>
|
|
||||||
<td>number | string | function</td>
|
|
||||||
<td><code>0</code></td>
|
|
||||||
<td>
|
|
||||||
<p>Offset of the dropdown relative to its target.</p>
|
|
||||||
<p>When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.</p>
|
|
||||||
<p>For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>flip</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.enabled">flip docs</a>.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>boundary</code></td>
|
|
||||||
<td>string | element</td>
|
|
||||||
<td><code>'scrollParent'</code></td>
|
|
||||||
<td>Overflow constraint boundary of the dropdown menu. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>reference</code></td>
|
|
||||||
<td>string | element</td>
|
|
||||||
<td><code>'toggle'</code></td>
|
|
||||||
<td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#referenceObject">referenceObject docs</a>.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>display</code></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><code>'dynamic'</code></td>
|
|
||||||
<td>By default, we use Popper for dynamic positioning. Disable this with <code>static</code>.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>popperConfig</code></td>
|
|
||||||
<td>null | object</td>
|
|
||||||
<td><code>null</code></td>
|
|
||||||
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
Note when `boundary` is set to any value other than `'scrollParent'`, the style `position: static` is applied to the `.dropdown` container.
|
Note when `boundary` is set to any value other than `'scrollParent'`, the style `position: static` is applied to the `.dropdown` container.
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Method | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th>Method</th>
|
| `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. |
|
||||||
<th>Description</th>
|
| `show` | Shows the dropdown menu of a given navbar or tabbed navigation. |
|
||||||
</tr>
|
| `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. |
|
||||||
</thead>
|
| `update` | Updates the position of an element's dropdown. |
|
||||||
<tbody>
|
| `dispose` | Destroys an element's dropdown. (Removes stored data on the DOM element) |
|
||||||
<tr>
|
| `getInstance` | Static method which allows you to get the dropdown instance associated with a DOM element. |
|
||||||
<td><code>toggle</code></td>
|
{{< /bs-table >}}
|
||||||
<td>
|
|
||||||
Toggles the dropdown menu of a given navbar or tabbed navigation.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>show</code></td>
|
|
||||||
<td>
|
|
||||||
Shows the dropdown menu of a given navbar or tabbed navigation.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hide</code></td>
|
|
||||||
<td>
|
|
||||||
Hides the dropdown menu of a given navbar or tabbed navigation.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>update</code></td>
|
|
||||||
<td>
|
|
||||||
Updates the position of an element's dropdown.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>dispose</code></td>
|
|
||||||
<td>
|
|
||||||
Destroys an element's dropdown. (Removes stored data on the DOM element)
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>getInstance</code></td>
|
|
||||||
<td>
|
|
||||||
Static method which allows you to get the dropdown instance associated with a DOM element.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element.
|
All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element.
|
||||||
|
|
||||||
`hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event.
|
`hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Event type | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th>Method</th>
|
| `show.bs.dropdown` | Fires immediately when the show instance method is called. |
|
||||||
<th>Description</th>
|
| `shown.bs.dropdown` | Fired when the dropdown has been made visible to the user and CSS transitions have completed. |
|
||||||
</tr>
|
| `hide.bs.dropdown` | Fires immediately when the hide instance method has been called. |
|
||||||
</thead>
|
| `hidden.bs.dropdown` | Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. |
|
||||||
<tbody>
|
{{< /bs-table >}}
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>show.bs.dropdown</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Fires immediately when the show instance method is called.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>shown.bs.dropdown</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Fired when the dropdown has been made visible to the user and CSS transitions have completed.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>hide.bs.dropdown</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Fires immediately when the hide instance method has been called.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>hidden.bs.dropdown</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var myDropdown = document.getElementById('myDropdown')
|
var myDropdown = document.getElementById('myDropdown')
|
||||||
|
|
|
||||||
|
|
@ -436,32 +436,14 @@ When showing a new tab, the events fire in the following order:
|
||||||
|
|
||||||
If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
|
If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Event type | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th style="width: 150px;">Event type</th>
|
| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
|
||||||
<th>Description</th>
|
| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
|
||||||
</tr>
|
| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
|
||||||
</thead>
|
| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
|
||||||
<tbody>
|
{{< /bs-table >}}
|
||||||
<tr>
|
|
||||||
<td><code>show.bs.tab</code></td>
|
|
||||||
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>shown.bs.tab</code></td>
|
|
||||||
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hide.bs.tab</code></td>
|
|
||||||
<td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hidden.bs.tab</code></td>
|
|
||||||
<td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var tabEl = document.querySelector('a[data-bs-toggle="list"]')
|
var tabEl = document.querySelector('a[data-bs-toggle="list"]')
|
||||||
|
|
|
||||||
|
|
@ -655,40 +655,16 @@ Our default modal without modifier class constitutes the "medium" size modal.
|
||||||
|
|
||||||
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.
|
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Class | Availability |
|
||||||
<tr>
|
| --- | --- | --- |
|
||||||
<th>Class</th>
|
| `.modal-fullscreen` | Always |
|
||||||
<th>Availability</th>
|
| `.modal-fullscreen-sm-down` | `576px` |
|
||||||
</tr>
|
| `.modal-fullscreen-md-down` | `768px` |
|
||||||
</thead>
|
| `.modal-fullscreen-lg-down` | `992px` |
|
||||||
<tbody>
|
| `.modal-fullscreen-xl-down` | `1200px` |
|
||||||
<tr>
|
| `.modal-fullscreen-xxl-down` | `1400px` |
|
||||||
<td><code>.modal-fullscreen</code></td>
|
{{< /bs-table >}}
|
||||||
<td>Always</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>.modal-fullscreen-sm-down</code></td>
|
|
||||||
<td>Below <code>576px</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>.modal-fullscreen-md-down</code></td>
|
|
||||||
<td>Below <code>768px</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>.modal-fullscreen-lg-down</code></td>
|
|
||||||
<td>Below <code>992px</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>.modal-fullscreen-xl-down</code></td>
|
|
||||||
<td>Below <code>1200px</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>.modal-fullscreen-xxl-down</code></td>
|
|
||||||
<td>Below <code>1400px</code></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<div class="bd-example">
|
<div class="bd-example">
|
||||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
|
||||||
|
|
@ -849,42 +825,14 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
|
||||||
|
|
||||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`.
|
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table "table bs-js-table" >}}
|
||||||
<thead>
|
| Name | Type | Default | Description |
|
||||||
<tr>
|
| --- | --- | --- | --- |
|
||||||
<th style="width: 100px;">Name</th>
|
| `backdrop` | boolean, `'static'` | `true` | Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal on click. |
|
||||||
<th style="width: 50px;">Type</th>
|
| `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. |
|
||||||
<th style="width: 50px;">Default</th>
|
| `focus` | boolean | `true` | Puts the focus on the modal when initialized. |
|
||||||
<th>Description</th>
|
| `show` | boolean | `true` | Shows the modal when initialized. |
|
||||||
</tr>
|
{{< /bs-table >}}
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>backdrop</code></td>
|
|
||||||
<td>boolean or the string <code>'static'</code></td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>keyboard</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Closes the modal when escape key is pressed</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>focus</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Puts the focus on the modal when initialized.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>show</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Shows the modal when initialized.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
|
|
||||||
|
|
@ -902,89 +850,30 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
#### toggle
|
{{< bs-table "table bs-js-table" >}}
|
||||||
|
| Method | Description |
|
||||||
Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
|
| --- | --- |
|
||||||
|
| `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). |
|
||||||
```js
|
| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). |
|
||||||
myModal.toggle()
|
| `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). |
|
||||||
```
|
| `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). |
|
||||||
|
| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) |
|
||||||
#### show
|
| `getInstance` | *Static* method which allows you to get the modal instance associated with a DOM element. |
|
||||||
|
{{< /bs-table >}}
|
||||||
Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).
|
|
||||||
|
|
||||||
```js
|
|
||||||
myModal.show()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### hide
|
|
||||||
|
|
||||||
Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
|
|
||||||
|
|
||||||
```js
|
|
||||||
myModal.hide()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### handleUpdate
|
|
||||||
|
|
||||||
Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
|
|
||||||
|
|
||||||
```js
|
|
||||||
myModal.handleUpdate()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### dispose
|
|
||||||
|
|
||||||
Destroys an element's modal. (Removes stored data on the DOM element)
|
|
||||||
|
|
||||||
```js
|
|
||||||
myModal.dispose()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### getInstance
|
|
||||||
|
|
||||||
*Static* method which allows you to get the modal instance associated with a DOM element
|
|
||||||
|
|
||||||
```js
|
|
||||||
var myModalEl = document.getElementById('myModal')
|
|
||||||
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
|
|
||||||
```
|
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
|
Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Event | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th style="width: 150px;">Event type</th>
|
| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
|
||||||
<th>Description</th>
|
| `shown.bs.modal` | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
|
||||||
</tr>
|
| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. |
|
||||||
</thead>
|
| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
|
||||||
<tbody>
|
| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside the modal or an escape key press is performed with the keyboard option or `data-bs-keyboard` set to `false`. |
|
||||||
<tr>
|
{{< /bs-table >}}
|
||||||
<td><code>show.bs.modal</code></td>
|
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>shown.bs.modal</code></td>
|
|
||||||
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hide.bs.modal</code></td>
|
|
||||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hidden.bs.modal</code></td>
|
|
||||||
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hidePrevented.bs.modal</code></td>
|
|
||||||
<td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or an escape key press is performed with the keyboard option or <code>data-bs-keyboard</code> set to <code>false</code>.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var myModalEl = document.getElementById('myModal')
|
var myModalEl = document.getElementById('myModal')
|
||||||
|
|
|
||||||
|
|
@ -629,32 +629,14 @@ When showing a new tab, the events fire in the following order:
|
||||||
|
|
||||||
If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
|
If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Event type | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th style="width: 150px;">Event type</th>
|
| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
|
||||||
<th>Description</th>
|
| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
|
||||||
</tr>
|
| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
|
||||||
</thead>
|
| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
|
||||||
<tbody>
|
{{< /bs-table >}}
|
||||||
<tr>
|
|
||||||
<td><code>show.bs.tab</code></td>
|
|
||||||
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>shown.bs.tab</code></td>
|
|
||||||
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hide.bs.tab</code></td>
|
|
||||||
<td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hidden.bs.tab</code></td>
|
|
||||||
<td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var tabEl = document.querySelector('a[data-bs-toggle="tab"]')
|
var tabEl = document.querySelector('a[data-bs-toggle="tab"]')
|
||||||
|
|
|
||||||
|
|
@ -152,142 +152,27 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||||
Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
|
Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
|
||||||
{{< /callout >}}
|
{{< /callout >}}
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table "table bs-js-table" >}}
|
||||||
<thead>
|
| Name | Type | Default | Description |
|
||||||
<tr>
|
| --- | --- | --- | --- |
|
||||||
<th style="width: 100px;">Name</th>
|
| `animation` | boolean | `true` | Apply a CSS fade transition to the popover. |
|
||||||
<th style="width: 100px;">Type</th>
|
| `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. |
|
||||||
<th style="width: 50px;">Default</th>
|
| `content` | string, element, function | `''` | Default content value if `data-bs-content` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to.
|
||||||
<th>Description</th>
|
| `delay` | number, object | `0` | Delay showing and hiding the popover (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
|
||||||
</tr>
|
| `html` | boolean | `false` | Insert HTML into the popover. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
|
||||||
</thead>
|
| `placement` | string, function | `'right'` | How to position the popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover instance. |
|
||||||
<tbody>
|
| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). |
|
||||||
<tr>
|
| `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. |
|
||||||
<td><code>animation</code></td>
|
| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
|
||||||
<td>boolean</td>
|
| `trigger` | string | `'click'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger. |
|
||||||
<td><code>true</code></td>
|
| `offset` | number | string | `0` | Offset of the popover relative to its target. For more information refer to Popper's [offset docs](https://popper.js.org/docs/v1/#modifiers..offset.offset). |
|
||||||
<td>Apply a CSS fade transition to the popover</td>
|
| `fallbackPlacement` | string, array | `'flip'` | Allow to specify which position Popper will use on fallback. For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v1/#modifiers..flip.behavior). |
|
||||||
</tr>
|
| `boundary` | string, element | `'scrollParent'` | Overflow constraint boundary of the popover. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper's [preventOverflow docs](https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement). |
|
||||||
<tr>
|
| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
|
||||||
<td><code>container</code></td>
|
| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
|
||||||
<td>string | element | false</td>
|
| `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. |
|
||||||
<td><code>false</code></td>
|
| `popperConfig` | null, object | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v1/#Popper.Defaults). |
|
||||||
<td>
|
{{< /bs-table >}}
|
||||||
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>content</code></td>
|
|
||||||
<td>string | element | function</td>
|
|
||||||
<td><code>''</code></td>
|
|
||||||
<td>
|
|
||||||
<p>Default content value if <code>data-bs-content</code> attribute isn't present.</p>
|
|
||||||
<p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>delay</code></td>
|
|
||||||
<td>number | object</td>
|
|
||||||
<td><code>0</code></td>
|
|
||||||
<td>
|
|
||||||
<p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
|
|
||||||
<p>If a number is supplied, delay is applied to both hide/show</p>
|
|
||||||
<p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>html</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>false</code></td>
|
|
||||||
<td>Insert HTML into the popover. If false, <code>innerText</code> property will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>placement</code></td>
|
|
||||||
<td>string | function</td>
|
|
||||||
<td><code>'right'</code></td>
|
|
||||||
<td>
|
|
||||||
<p>How to position the popover - auto | top | bottom | left | right.<br>When <code>auto</code> is specified, it will dynamically reorient the popover.</p>
|
|
||||||
<p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>selector</code></td>
|
|
||||||
<td>string | false</td>
|
|
||||||
<td><code>false</code></td>
|
|
||||||
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="{{< param repo >}}/issues/4215">this</a> and <a href="https://codepen.io/team/bootstrap/pen/zYBXGwX?editors=1010">an informative example</a>.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>template</code></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><code>'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'</code></td>
|
|
||||||
<td>
|
|
||||||
<p>Base HTML to use when creating the popover.</p>
|
|
||||||
<p>The popover's <code>title</code> will be injected into the <code>.popover-header</code>.</p>
|
|
||||||
<p>The popover's <code>content</code> will be injected into the <code>.popover-body</code>.</p>
|
|
||||||
<p><code>.popover-arrow</code> will become the popover's arrow.</p>
|
|
||||||
<p>The outermost wrapper element should have the <code>.popover</code> class.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>title</code></td>
|
|
||||||
<td>string | element | function</td>
|
|
||||||
<td><code>''</code></td>
|
|
||||||
<td>
|
|
||||||
<p>Default title value if <code>title</code> attribute isn't present.</p>
|
|
||||||
<p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>trigger</code></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><code>'click'</code></td>
|
|
||||||
<td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. <code>manual</code> cannot be combined with any other trigger.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>offset</code></td>
|
|
||||||
<td>number | string</td>
|
|
||||||
<td><code>0</code></td>
|
|
||||||
<td>Offset of the popover relative to its target. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>fallbackPlacement</code></td>
|
|
||||||
<td>string | array</td>
|
|
||||||
<td><code>'flip'</code></td>
|
|
||||||
<td>Allow to specify which position Popper will use on fallback. For more information refer to
|
|
||||||
Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>boundary</code></td>
|
|
||||||
<td>string | element</td>
|
|
||||||
<td><code>'scrollParent'</code></td>
|
|
||||||
<td>Overflow constraint boundary of the popover. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>sanitize</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>allowList</code></td>
|
|
||||||
<td>object</td>
|
|
||||||
<td><a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">Default value</a></td>
|
|
||||||
<td>Object which contains allowed attributes and tags</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>sanitizeFn</code></td>
|
|
||||||
<td>null | function</td>
|
|
||||||
<td><code>null</code></td>
|
|
||||||
<td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>popperConfig</code></td>
|
|
||||||
<td>null | object</td>
|
|
||||||
<td><code>null</code></td>
|
|
||||||
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
{{< callout info >}}
|
{{< callout info >}}
|
||||||
#### Data attributes for individual popovers
|
#### Data attributes for individual popovers
|
||||||
|
|
@ -301,112 +186,31 @@ Options for individual popovers can alternatively be specified through the use o
|
||||||
{{< partial "callout-danger-async-methods.md" >}}
|
{{< partial "callout-danger-async-methods.md" >}}
|
||||||
{{< /callout >}}
|
{{< /callout >}}
|
||||||
|
|
||||||
|
{{< bs-table "table bs-js-table" >}}
|
||||||
#### show
|
| Method | Description |
|
||||||
|
| --- | --- |
|
||||||
Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed.
|
| `show` | Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed. |
|
||||||
|
| `hide` | Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
|
||||||
```js
|
| `toggle` | Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
|
||||||
myPopover.show()
|
| `dispose` | Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
|
||||||
```
|
| `enable` | Gives an element's popover the ability to be shown. **Popovers are enabled by default.** |
|
||||||
|
| `disable` | Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled. |
|
||||||
#### hide
|
| `toggleEnabled` | Toggles the ability for an element's popover to be shown or hidden. |
|
||||||
|
| `update` | Updates the position of an element's popover. |
|
||||||
Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
|
| `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. |
|
||||||
|
{{< /bs-table >}}
|
||||||
```js
|
|
||||||
myPopover.hide()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### toggle
|
|
||||||
|
|
||||||
Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
|
|
||||||
|
|
||||||
```js
|
|
||||||
myPopover.toggle()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### dispose
|
|
||||||
|
|
||||||
Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
|
|
||||||
|
|
||||||
```js
|
|
||||||
myPopover.dispose()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### enable
|
|
||||||
|
|
||||||
Gives an element's popover the ability to be shown. **Popovers are enabled by default.**
|
|
||||||
|
|
||||||
```js
|
|
||||||
myPopover.enable()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### disable
|
|
||||||
|
|
||||||
Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled.
|
|
||||||
|
|
||||||
```js
|
|
||||||
myPopover.disable()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### toggleEnabled
|
|
||||||
|
|
||||||
Toggles the ability for an element's popover to be shown or hidden.
|
|
||||||
|
|
||||||
```js
|
|
||||||
myPopover.toggleEnabled()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### update
|
|
||||||
|
|
||||||
Updates the position of an element's popover.
|
|
||||||
|
|
||||||
```js
|
|
||||||
myPopover.update()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### getInstance
|
|
||||||
|
|
||||||
*Static* method which allows you to get the popover instance associated with a DOM element
|
|
||||||
|
|
||||||
```js
|
|
||||||
var exampleTriggerEl = document.getElementById('example')
|
|
||||||
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
|
|
||||||
```
|
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Event | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th style="width: 150px;">Event type</th>
|
| `show.bs.popover` | This event fires immediately when the <code>show</code> instance method is called. |
|
||||||
<th>Description</th>
|
| `shown.bs.popover` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
|
||||||
</tr>
|
| `hide.bs.popover` | This event is fired immediately when the <code>hide</code> instance method has been called. |
|
||||||
</thead>
|
| `hidden.bs.popover` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
|
||||||
<tbody>
|
| `inserted.bs.popover` | This event is fired after the <code>show.bs.popover</code> event when the popover template has been added to the DOM. |
|
||||||
<tr>
|
{{< /bs-table >}}
|
||||||
<td>show.bs.popover</td>
|
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>shown.bs.popover</td>
|
|
||||||
<td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>hide.bs.popover</td>
|
|
||||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>hidden.bs.popover</td>
|
|
||||||
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>inserted.bs.popover</td>
|
|
||||||
<td>This event is fired after the <code>show.bs.popover</code> event when the popover template has been added to the DOM.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var myPopoverTrigger = document.getElementById('myPopover')
|
var myPopoverTrigger = document.getElementById('myPopover')
|
||||||
|
|
|
||||||
|
|
@ -274,11 +274,29 @@ Navbar links must have resolvable id targets. For example, a `<a href="#home">ho
|
||||||
Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.
|
Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.
|
||||||
{{< /callout >}}
|
{{< /callout >}}
|
||||||
|
|
||||||
|
### Options
|
||||||
|
|
||||||
|
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`.
|
||||||
|
|
||||||
|
{{< bs-table "table bs-js-table" >}}
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `offset` | number | `10` | Pixels to offset from top when calculating position of scroll. |
|
||||||
|
| `method` | string | `auto` | Finds which section the spied element is in. `auto` will choose the best method to get scroll coordinates. `offset` will use the [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) method to get scroll coordinates. `position` will use the [`HTMLElement.offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop) and [`HTMLElement.offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft) properties to get scroll coordinates.` |
|
||||||
|
| `target` | string, jQuery object, DOM element | | Specifies element to apply Scrollspy plugin. |
|
||||||
|
{{< /bs-table >}}
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
|
|
||||||
#### refresh
|
{{< bs-table "table bs-js-table" >}}
|
||||||
|
| Method | Description |
|
||||||
|
| --- | --- |
|
||||||
|
| `refresh` | When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method. |
|
||||||
|
| `dispose` | Destroys an element's scrollspy. (Removes stored data on the DOM element) |
|
||||||
|
| `getInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element |
|
||||||
|
{{< /bs-table >}}
|
||||||
|
|
||||||
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
|
Here's an example using the refresh method:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
|
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
|
||||||
|
|
@ -288,70 +306,13 @@ dataSpyList.forEach(function (dataSpyEl) {
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
#### dispose
|
|
||||||
|
|
||||||
Destroys an element's scrollspy. (Removes stored data on the DOM element)
|
|
||||||
|
|
||||||
#### getInstance
|
|
||||||
|
|
||||||
*Static* method which allows you to get the scrollspy instance associated with a DOM element
|
|
||||||
|
|
||||||
```js
|
|
||||||
var scrollSpyContentEl = document.getElementById('content')
|
|
||||||
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
|
|
||||||
```
|
|
||||||
|
|
||||||
### Options
|
|
||||||
|
|
||||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`.
|
|
||||||
|
|
||||||
<table class="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="width: 100px;">Name</th>
|
|
||||||
<th style="width: 100px;">Type</th>
|
|
||||||
<th style="width: 50px;">Default</th>
|
|
||||||
<th>Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>offset</code></td>
|
|
||||||
<td>number</td>
|
|
||||||
<td><code>10</code></td>
|
|
||||||
<td>Pixels to offset from top when calculating position of scroll.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>method</code></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><code>auto</code></td>
|
|
||||||
<td>Finds which section the spied element is in. <code>auto</code> will choose the best method to get scroll coordinates. <code>offset</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect"><code>Element.getBoundingClientRect()</code></a> method to get scroll coordinates. <code>position</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop"><code>HTMLElement.offsetTop</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft"><code>HTMLElement.offsetLeft</code></a> properties to get scroll coordinates.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>target</code></td>
|
|
||||||
<td>string | jQuery object | DOM element</td>
|
|
||||||
<td></td>
|
|
||||||
<td>Specifies element to apply Scrollspy plugin.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table "table bs-js-table" >}}
|
||||||
<thead>
|
| Event | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th style="width: 150px;">Event type</th>
|
| `activate.bs.scrollspy` | This event fires on the scroll element whenever a new item becomes activated by the scrollspy. |
|
||||||
<th>Description</th>
|
{{< /bs-table >}}
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>activate.bs.scrollspy</code></td>
|
|
||||||
<td>This event fires on the scroll element whenever a new item becomes activated by the scrollspy.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
|
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
|
||||||
|
|
|
||||||
|
|
@ -255,38 +255,13 @@ var toastList = toastElList.map(function (toastEl) {
|
||||||
|
|
||||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`.
|
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table "table bs-js-table" >}}
|
||||||
<thead>
|
| Name | Type | Default | Description |
|
||||||
<tr>
|
| --- | --- | --- | --- |
|
||||||
<th style="width: 100px;">Name</th>
|
| `animation` | boolean | `true` | Apply a CSS fade transition to the toast |
|
||||||
<th style="width: 100px;">Type</th>
|
| `autohide` | boolean | `true` | Automatically hide the toast after the delay |
|
||||||
<th style="width: 50px;">Default</th>
|
| `delay` | number | `5000` | Delay in milliseconds before hiding the toast |
|
||||||
<th>Description</th>
|
{{< /bs-table >}}
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>animation</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Apply a CSS fade transition to the toast</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>autohide</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Auto hide the toast</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>delay</code></td>
|
|
||||||
<td>number</td>
|
|
||||||
<td>
|
|
||||||
<code>5000</code>
|
|
||||||
</td>
|
|
||||||
<td>Delay hiding the toast (ms)</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
|
|
||||||
|
|
@ -294,59 +269,24 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||||
{{< partial "callout-danger-async-methods.md" >}}
|
{{< partial "callout-danger-async-methods.md" >}}
|
||||||
{{< /callout >}}
|
{{< /callout >}}
|
||||||
|
|
||||||
#### show
|
{{< bs-table "table bs-js-table" >}}
|
||||||
|
| Method | Description |
|
||||||
Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs).
|
| --- | --- |
|
||||||
You have to manually call this method, instead your toast won't show.
|
| `show` | Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs). You have to manually call this method, instead your toast won't show. |
|
||||||
|
| `hide` | Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`. |
|
||||||
```js
|
| `dispose` | Hides an element's toast. Your toast will remain on the DOM but won't show anymore. |
|
||||||
toast.show()
|
{{< /bs-table >}}
|
||||||
```
|
|
||||||
|
|
||||||
#### hide
|
|
||||||
|
|
||||||
Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`.
|
|
||||||
|
|
||||||
```js
|
|
||||||
toast.hide()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### dispose
|
|
||||||
|
|
||||||
Hides an element's toast. Your toast will remain on the DOM but won't show anymore.
|
|
||||||
|
|
||||||
```js
|
|
||||||
toast.dispose()
|
|
||||||
```
|
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table "table bs-js-table" >}}
|
||||||
<thead>
|
| Event | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th style="width: 150px;">Event type</th>
|
| `show.bs.toast` | This event fires immediately when the `show` instance method is called. |
|
||||||
<th>Description</th>
|
| `shown.bs.toast` | This event is fired when the toast has been made visible to the user. |
|
||||||
</tr>
|
| `hide.bs.toast` | This event is fired immediately when the `hide` instance method has been called. |
|
||||||
</thead>
|
| `hidden.bs.toast` | This event is fired when the toast has finished being hidden from the user. |
|
||||||
<tbody>
|
{{< /bs-table >}}
|
||||||
<tr>
|
|
||||||
<td><code>show.bs.toast</code></td>
|
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>shown.bs.toast</code></td>
|
|
||||||
<td>This event is fired when the toast has been made visible to the user.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hide.bs.toast</code></td>
|
|
||||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hidden.bs.toast</code></td>
|
|
||||||
<td>This event is fired when the toast has finished being hidden from the user.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var myToastEl = document.getElementById('myToast')
|
var myToastEl = document.getElementById('myToast')
|
||||||
|
|
|
||||||
|
|
@ -159,144 +159,26 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||||
Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
|
Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
|
||||||
{{< /callout >}}
|
{{< /callout >}}
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table "table bs-js-table" >}}
|
||||||
<thead>
|
| Name | Type | Default | Description |
|
||||||
<tr>
|
| --- | --- | --- | --- |
|
||||||
<th style="width: 100px;">Name</th>
|
| `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip |
|
||||||
<th style="width: 100px;">Type</th>
|
| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. |
|
||||||
<th style="width: 50px;">Default</th>
|
| `delay` | number, object | `0` | Delay showing and hiding the tooltip (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
|
||||||
<th>Description</th>
|
| `html` | boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip's `title` will be rendered in the tooltip. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
|
||||||
</tr>
|
| `placement` | string, function | `'top'` | How to position the tooltip: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance. |
|
||||||
</thead>
|
| `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). |
|
||||||
<tbody>
|
| `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"`. |
|
||||||
<tr>
|
| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
|
||||||
<td><code>animation</code></td>
|
| `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. |
|
||||||
<td>boolean</td>
|
| `offset` | number, string | `0` | Offset of the popover relative to its target. For more information refer to Popper's [offset docs](https://popper.js.org/docs/v1/#modifiers..offset.offset). |
|
||||||
<td><code>true</code></td>
|
| `fallbackPlacement` | string, array | `'flip'` | Allow to specify which position Popper will use on fallback. For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v1/#modifiers..flip.behavior). |
|
||||||
<td>Apply a CSS fade transition to the tooltip</td>
|
| `boundary` | string, element | `'scrollParent'` | Overflow constraint boundary of the popover. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper's [preventOverflow docs](https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement). |
|
||||||
</tr>
|
| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
|
||||||
<tr>
|
| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
|
||||||
<td><code>container</code></td>
|
| `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. |
|
||||||
<td>string | element | false</td>
|
| `popperConfig` | null, object | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v1/#Popper.Defaults). |
|
||||||
<td><code>false</code></td>
|
{{< /bs-table >}}
|
||||||
<td>
|
|
||||||
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>delay</code></td>
|
|
||||||
<td>number | object</td>
|
|
||||||
<td><code>0</code></td>
|
|
||||||
<td>
|
|
||||||
<p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
|
|
||||||
<p>If a number is supplied, delay is applied to both hide/show</p>
|
|
||||||
<p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>html</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>false</code></td>
|
|
||||||
<td>
|
|
||||||
<p>Allow HTML in the tooltip.</p>
|
|
||||||
<p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, <code>innerText</code> property will be used to insert content into the DOM.</p>
|
|
||||||
<p>Use text if you're worried about XSS attacks.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>placement</code></td>
|
|
||||||
<td>string | function</td>
|
|
||||||
<td><code>'top'</code></td>
|
|
||||||
<td>
|
|
||||||
<p>How to position the tooltip - auto | top | bottom | left | right.<br>When <code>auto</code> is specified, it will dynamically reorient the tooltip.</p>
|
|
||||||
<p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>selector</code></td>
|
|
||||||
<td>string | false</td>
|
|
||||||
<td><code>false</code></td>
|
|
||||||
<td>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 (<code>jQuery.on</code> support). See <a href="{{< param repo >}}/issues/4215">this</a> and <a href="https://codepen.io/team/bootstrap/pen/zYBXGwX?editors=1010">an informative example</a>.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>template</code></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'</code></td>
|
|
||||||
<td>
|
|
||||||
<p>Base HTML to use when creating the tooltip.</p>
|
|
||||||
<p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
|
|
||||||
<p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
|
|
||||||
<p>The outermost wrapper element should have the <code>.tooltip</code> class and <code>role="tooltip"</code>.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>title</code></td>
|
|
||||||
<td>string | element | function</td>
|
|
||||||
<td><code>''</code></td>
|
|
||||||
<td>
|
|
||||||
<p>Default title value if <code>title</code> attribute isn't present.</p>
|
|
||||||
<p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>trigger</code></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><code>'hover focus'</code></td>
|
|
||||||
<td>
|
|
||||||
<p>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</p>
|
|
||||||
<p><code>'manual'</code> indicates that the tooltip will be triggered programmatically via the <code>.tooltip('show')</code>, <code>.tooltip('hide')</code> and <code>.tooltip('toggle')</code> methods; this value cannot be combined with any other trigger.</p>
|
|
||||||
<p><code>'hover'</code> 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.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>offset</code></td>
|
|
||||||
<td>number | string | function</td>
|
|
||||||
<td><code>0</code></td>
|
|
||||||
<td>
|
|
||||||
<p>Offset of the tooltip relative to its target.</p>
|
|
||||||
<p>When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.</p>
|
|
||||||
<p>For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>fallbackPlacement</code></td>
|
|
||||||
<td>string | array</td>
|
|
||||||
<td><code>'flip'</code></td>
|
|
||||||
<td>Allow to specify which position Popper will use on fallback. For more information refer to
|
|
||||||
Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>boundary</code></td>
|
|
||||||
<td>string | element</td>
|
|
||||||
<td><code>'scrollParent'</code></td>
|
|
||||||
<td>Overflow constraint boundary of the tooltip. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>sanitize</code></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td><code>true</code></td>
|
|
||||||
<td>Enable or disable the sanitization. If activated <code>'template'</code> and <code>'title'</code> options will be sanitized.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>allowList</code></td>
|
|
||||||
<td>object</td>
|
|
||||||
<td><a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">Default value</a></td>
|
|
||||||
<td>Object which contains allowed attributes and tags</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>sanitizeFn</code></td>
|
|
||||||
<td>null | function</td>
|
|
||||||
<td><code>null</code></td>
|
|
||||||
<td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>popperConfig</code></td>
|
|
||||||
<td>null | object</td>
|
|
||||||
<td><code>null</code></td>
|
|
||||||
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
{{< callout info >}}
|
{{< callout info >}}
|
||||||
#### Data attributes for individual tooltips
|
#### Data attributes for individual tooltips
|
||||||
|
|
@ -310,69 +192,18 @@ Options for individual tooltips can alternatively be specified through the use o
|
||||||
{{< partial "callout-danger-async-methods.md" >}}
|
{{< partial "callout-danger-async-methods.md" >}}
|
||||||
{{< /callout >}}
|
{{< /callout >}}
|
||||||
|
|
||||||
#### show
|
{{< bs-table "table bs-js-table" >}}
|
||||||
|
| Method | Description |
|
||||||
Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
|
| --- | --- |
|
||||||
|
| `show` | Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed. |
|
||||||
```js
|
| `hide` | Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. |
|
||||||
tooltip.show()
|
| `toggle` | Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. |
|
||||||
```
|
| `dispose` | Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
|
||||||
|
| `enable` | Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.** |
|
||||||
#### hide
|
| `disable` | Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled. |
|
||||||
|
| `toggleEnabled` | Toggles the ability for an element's tooltip to be shown or hidden. |
|
||||||
Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
|
| `update` | Updates the position of an element's tooltip. |
|
||||||
|
{{< /bs-table >}}
|
||||||
```js
|
|
||||||
tooltip.hide()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### toggle
|
|
||||||
|
|
||||||
Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
|
|
||||||
|
|
||||||
```js
|
|
||||||
tooltip.toggle()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### dispose
|
|
||||||
|
|
||||||
Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
|
|
||||||
|
|
||||||
```js
|
|
||||||
tooltip.dispose()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### enable
|
|
||||||
|
|
||||||
Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.**
|
|
||||||
|
|
||||||
```js
|
|
||||||
tooltip.enable()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### disable
|
|
||||||
|
|
||||||
Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
|
|
||||||
|
|
||||||
```js
|
|
||||||
tooltip.disable()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### toggleEnabled
|
|
||||||
|
|
||||||
Toggles the ability for an element's tooltip to be shown or hidden.
|
|
||||||
|
|
||||||
```js
|
|
||||||
tooltip.toggleEnabled()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### update
|
|
||||||
|
|
||||||
Updates the position of an element's tooltip.
|
|
||||||
|
|
||||||
```js
|
|
||||||
tooltip.update()
|
|
||||||
```
|
|
||||||
|
|
||||||
#### getInstance
|
#### getInstance
|
||||||
|
|
||||||
|
|
@ -385,36 +216,15 @@ var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Boots
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Event | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th style="width: 150px;">Event type</th>
|
| `show.bs.tooltip` | This event fires immediately when the <code>show</code> instance method is called. |
|
||||||
<th>Description</th>
|
| `shown.bs.tooltip` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
|
||||||
</tr>
|
| `hide.bs.tooltip` | This event is fired immediately when the <code>hide</code> instance method has been called. |
|
||||||
</thead>
|
| `hidden.bs.tooltip` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
|
||||||
<tbody>
|
| `inserted.bs.tooltip` | This event is fired after the <code>show.bs.tooltip</code> event when the tooltip template has been added to the DOM. |
|
||||||
<tr>
|
{{< /bs-table >}}
|
||||||
<td><code>show.bs.tooltip</code></td>
|
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>shown.bs.tooltip</code></td>
|
|
||||||
<td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hide.bs.tooltip</code></td>
|
|
||||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hidden.bs.tooltip</code></td>
|
|
||||||
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>inserted.bs.tooltip</code></td>
|
|
||||||
<td>This event is fired after the <code>show.bs.tooltip</code> event when the tooltip template has been added to the DOM.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var myTooltipEl = document.getElementById('myTooltip')
|
var myTooltipEl = document.getElementById('myTooltip')
|
||||||
|
|
|
||||||
|
|
@ -198,41 +198,41 @@ For indicating sample output from a program use the `<samp>` tag.
|
||||||
|
|
||||||
Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
|
Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
|
||||||
|
|
||||||
<div class="bd-example">
|
{{< example >}}
|
||||||
<table>
|
<table>
|
||||||
<caption>
|
<caption>
|
||||||
This is an example table, and this is its caption to describe the contents.
|
This is an example table, and this is its caption to describe the contents.
|
||||||
</caption>
|
</caption>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Table heading</th>
|
<th>Table heading</th>
|
||||||
<th>Table heading</th>
|
<th>Table heading</th>
|
||||||
<th>Table heading</th>
|
<th>Table heading</th>
|
||||||
<th>Table heading</th>
|
<th>Table heading</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
{{< /example >}}
|
||||||
|
|
||||||
## Forms
|
## Forms
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,52 +22,16 @@ These styles can be found within `_reboot.scss`, and the global variables are de
|
||||||
|
|
||||||
All HTML headings, `<h1>` through `<h6>`, are available.
|
All HTML headings, `<h1>` through `<h6>`, are available.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Heading | Example |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th>Heading</th>
|
| `<h1></h1>` | <span class="h1">h1. Bootstrap heading</span> |
|
||||||
<th>Example</th>
|
| `<h2></h2>` | <span class="h2">h2. Bootstrap heading</span> |
|
||||||
</tr>
|
| `<h3></h3>` | <span class="h3">h3. Bootstrap heading</span> |
|
||||||
</thead>
|
| `<h4></h4>` | <span class="h4">h4. Bootstrap heading</span> |
|
||||||
<tbody>
|
| `<h5></h5>` | <span class="h5">h5. Bootstrap heading</span> |
|
||||||
<tr>
|
| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> |
|
||||||
<td>
|
{{< /bs-table >}}
|
||||||
{{< markdown >}}`<h1></h1>`{{< /markdown >}}
|
|
||||||
</td>
|
|
||||||
<td><span class="h1">h1. Bootstrap heading</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
{{< markdown >}}`<h2></h2>`{{< /markdown >}}
|
|
||||||
</td>
|
|
||||||
<td><span class="h2">h2. Bootstrap heading</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
{{< markdown >}}`<h3></h3>`{{< /markdown >}}
|
|
||||||
</td>
|
|
||||||
<td><span class="h3">h3. Bootstrap heading</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
{{< markdown >}}`<h4></h4>`{{< /markdown >}}
|
|
||||||
</td>
|
|
||||||
<td><span class="h4">h4. Bootstrap heading</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
{{< markdown >}}`<h5></h5>`{{< /markdown >}}
|
|
||||||
</td>
|
|
||||||
<td><span class="h5">h5. Bootstrap heading</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
{{< markdown >}}`<h6></h6>`{{< /markdown >}}
|
|
||||||
</td>
|
|
||||||
<td><span class="h6">h6. Bootstrap heading</span></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<h1>h1. Bootstrap heading</h1>
|
<h1>h1. Bootstrap heading</h1>
|
||||||
|
|
|
||||||
|
|
@ -22,52 +22,18 @@ When completed, you'll be able to run the various commands provided from the com
|
||||||
|
|
||||||
Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes numerous tasks for developing the project. Run `npm run` to see all the npm scripts in your terminal. **Primary tasks include:**
|
Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes numerous tasks for developing the project. Run `npm run` to see all the npm scripts in your terminal. **Primary tasks include:**
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Task | Description |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th>Task</th>
|
| `npm start` | Compiles CSS and JavaScript, builds the documentation, and starts a local server. |
|
||||||
<th>Description</th>
|
| `npm run dist` | Creates the `dist/` directory with compiled files. Uses [Sass](https://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer), and [terser](https://github.com/terser/terser). |
|
||||||
</tr>
|
| `npm test` | Runs tests locally after running `npm run dist` |
|
||||||
</thead>
|
| `npm run docs-serve` | Builds and runs the documentation locally. |
|
||||||
<tbody>
|
{{< /bs-table >}}
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>npm start</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Compiles CSS and JavaScript, builds the documentation, and starts a local server.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>npm run dist</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Creates the <code>dist/</code> directory with compiled files. Requires <a href="https://sass-lang.com/">Sass</a>, <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, and <a href="https://github.com/terser/terser">terser</a>.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>npm test</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Runs tests locally after running <code>npm run dist</code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code>npm run docs-serve</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Builds and runs the documentation locally.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
## Autoprefixer
|
## Autoprefixer
|
||||||
|
|
||||||
Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
|
Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
|
||||||
|
|
||||||
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]({{< param repo >}}/blob/v{{< param current_version >}}/.browserslistrc) for details.
|
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]({{< param repo >}}/blob/v{{< param current_version >}}/.browserslistrc) for details.
|
||||||
|
|
||||||
|
|
@ -84,5 +50,3 @@ Learn more about using Hugo by reading its [documentation](https://gohugo.io/doc
|
||||||
## Troubleshooting
|
## Troubleshooting
|
||||||
|
|
||||||
Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
|
Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
|
||||||
|
|
||||||
[autoprefixer]: https://github.com/postcss/autoprefixer
|
|
||||||
|
|
|
||||||
|
|
@ -56,72 +56,24 @@ To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,x
|
||||||
|
|
||||||
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
|
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
|
||||||
|
|
||||||
<table class="table">
|
{{< bs-table >}}
|
||||||
<thead>
|
| Screen size | Class |
|
||||||
<tr>
|
| --- | --- |
|
||||||
<th>Screen size</th>
|
| Hidden on all | `.d-none` |
|
||||||
<th>Class</th>
|
| Hidden only on xs | `.d-none .d-sm-block` |
|
||||||
</tr>
|
| Hidden only on sm | `.d-sm-none .d-md-block` |
|
||||||
</thead>
|
| Hidden only on md | `.d-md-none .d-lg-block` |
|
||||||
<tbody>
|
| Hidden only on lg | `.d-lg-none .d-xl-block` |
|
||||||
<tr>
|
| Hidden only on xl | `.d-xl-none` |
|
||||||
<td>Hidden on all</td>
|
| Hidden only on xxl | `.d-xxl-none` |
|
||||||
<td><code>.d-none</code></td>
|
| Visible on all | `.d-block` |
|
||||||
</tr>
|
| Visible only on xs | `.d-block .d-sm-none` |
|
||||||
<tr>
|
| Visible only on sm | `.d-none .d-sm-block .d-md-none` |
|
||||||
<td>Hidden only on xs</td>
|
| Visible only on md | `.d-none .d-md-block .d-lg-none` |
|
||||||
<td><code>.d-none .d-sm-block</code></td>
|
| Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
|
||||||
</tr>
|
| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
|
||||||
<tr>
|
| Visible only on xxl | `.d-none .d-xxl-block` |
|
||||||
<td>Hidden only on sm</td>
|
{{< /bs-table >}}
|
||||||
<td><code>.d-sm-none .d-md-block</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Hidden only on md</td>
|
|
||||||
<td><code>.d-md-none .d-lg-block</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Hidden only on lg</td>
|
|
||||||
<td><code>.d-lg-none .d-xl-block</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Hidden only on xl</td>
|
|
||||||
<td><code>.d-xl-none</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Hidden only on xxl</td>
|
|
||||||
<td><code>.d-xxl-none</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Visible on all</td>
|
|
||||||
<td><code>.d-block</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Visible only on xs</td>
|
|
||||||
<td><code>.d-block .d-sm-none</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Visible only on sm</td>
|
|
||||||
<td><code>.d-none .d-sm-block .d-md-none</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Visible only on md</td>
|
|
||||||
<td><code>.d-none .d-md-block .d-lg-none</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Visible only on lg</td>
|
|
||||||
<td><code>.d-none .d-lg-block .d-xl-none</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Visible only on xl</td>
|
|
||||||
<td><code>.d-none .d-xl-block .d-xxl-none</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Visible only on xxl</td>
|
|
||||||
<td><code>.d-none .d-xxl-block</code></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<div class="d-lg-none">hide on lg and wider screens</div>
|
<div class="d-lg-none">hide on lg and wider screens</div>
|
||||||
|
|
|
||||||
|
|
@ -5,5 +5,6 @@
|
||||||
|
|
||||||
{{- $css_class := .Get 0 | default "table" -}}
|
{{- $css_class := .Get 0 | default "table" -}}
|
||||||
{{- $html_table := .Inner | markdownify -}}
|
{{- $html_table := .Inner | markdownify -}}
|
||||||
{{- $html_table = replace $html_table "<table>" (printf `<table class="%s">` $css_class) -}}
|
{{- $html_table = replace $html_table "<table>" (printf `<div class="table-responsive"><table class="%s">` $css_class) -}}
|
||||||
|
{{- $html_table = replace $html_table "</table>" "</table></div>" -}}
|
||||||
{{- $html_table | safeHTML -}}
|
{{- $html_table | safeHTML -}}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue