Adding upstream version 5.3.5+dfsg.
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
c39481092b
commit
96570520fe
GPG key ID:
FBB4F0E80A80222F
233 changed files with 6665 additions and 12847 deletions
|
|
@ -38,7 +38,7 @@ Click the button below to show an alert (hidden with inline styles to start), th
|
|||
|
||||
We use the following JavaScript to trigger our live alert demo:
|
||||
|
||||
{{< js-docs name="live-alert" file="site/assets/js/snippets.js" >}}
|
||||
{{< js-docs name="live-alert" file="site/assets/js/partials/snippets.js" >}}
|
||||
|
||||
### Link color
|
||||
|
||||
|
|
@ -72,7 +72,7 @@ Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) an
|
|||
|
||||
{{< example >}}
|
||||
<div class="alert alert-primary d-flex align-items-center" role="alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
|
||||
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
|
||||
</svg>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ Dividers are automatically added in CSS through [`::before`](https://developer.m
|
|||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this:
|
||||
When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string/#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this:
|
||||
|
||||
```scss
|
||||
$breadcrumb-divider: quote(">");
|
||||
|
|
|
|||
|
|
@ -195,8 +195,6 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
|||
|
||||
{{< example >}}
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
|
|
@ -206,6 +204,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
|||
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<div class="btn-group dropstart" role="group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@ You can make your carousels autoplay on page load by setting the `ride` option t
|
|||
{{< callout info >}}
|
||||
For accessibility reasons, we recommend avoiding the use of autoplaying carousels. If your page does include an autoplaying carousel, we recommend providing an additional button or control to explicitly pause/stop the carousel.
|
||||
|
||||
See [WCAG 2.1 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG21/#pause-stop-hide).
|
||||
See [WCAG 2.2 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG/#pause-stop-hide).
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example >}}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ toc: true
|
|||
|
||||
## Overview
|
||||
|
||||
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/).
|
||||
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/blog/bootstrap-explained-dropdowns/).
|
||||
|
||||
Dropdowns are built on a third party library, [Popper](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
|
||||
Dropdowns are built on a third party library, [Popper](https://popper.js.org/docs/v2/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
|
||||
|
||||
## Accessibility
|
||||
|
||||
|
|
@ -126,7 +126,7 @@ The best part is you can do this with any button variant, too:
|
|||
<!-- Example single danger button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Action
|
||||
Danger
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
|
|
@ -228,7 +228,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
|
|||
```html
|
||||
<!-- Example split danger button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@ When modals become too long for the user's viewport or device, they scroll indep
|
|||
<h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" style="min-height: 1500px">
|
||||
<div class="modal-body" style="min-height: 100vh">
|
||||
<p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
|
@ -481,7 +481,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< js-docs name="varying-modal-content" file="site/assets/js/snippets.js" >}}
|
||||
{{< js-docs name="varying-modal-content" file="site/assets/js/partials/snippets.js" >}}
|
||||
|
||||
### Toggle between modals
|
||||
|
||||
|
|
@ -856,7 +856,7 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
|
|||
{{< bs-table >}}
|
||||
| Event | Description |
|
||||
| --- | --- |
|
||||
| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. |
|
||||
| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. Can be prevented by calling `event.preventDefault()`. See [JavaScript events documentation]({{< docsref "/getting-started/javascript#events" >}}) for more details on event prevention. |
|
||||
| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
|
||||
| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |
|
||||
| `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. |
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
|
|||
- Flex and spacing utilities for any form controls and actions.
|
||||
- `.navbar-text` for adding vertically centered strings of text.
|
||||
- `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint.
|
||||
- Add an optional `.navbar-scroll` to set a `max-height` and [scroll expanded navbar content](#scrolling).
|
||||
- Add an optional `.navbar-nav-scroll` to set a `max-height` and [scroll expanded navbar content](#scrolling).
|
||||
|
||||
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
|
||||
|
||||
|
|
@ -428,7 +428,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
|
|||
<!-- Navbar content -->
|
||||
</nav>
|
||||
|
||||
<nav class="navbar" style="background-color: #e3f2fd;">
|
||||
<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: Placeholders
|
|||
description: Use loading placeholders for your components or pages to indicate something may still be loading.
|
||||
group: components
|
||||
toc: true
|
||||
added: "5.1"
|
||||
added:
|
||||
version: "5.1"
|
||||
---
|
||||
|
||||
## About
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ toc: true
|
|||
|
||||
Things to know when using the popover plugin:
|
||||
|
||||
- Popovers rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
|
||||
- Popovers rely on the third party library [Popper](https://popper.js.org/docs/v2/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
|
||||
- Popovers require the [popover plugin]({{< docsref "/components/popovers" >}}) as a dependency.
|
||||
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
- Zero-length `title` and `content` values will never show a popover.
|
||||
|
|
@ -186,21 +186,21 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
|
|||
| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
|
||||
| `animation` | boolean | `true` | Apply a CSS fade transition to the popover. |
|
||||
| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
|
||||
| `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. |
|
||||
| `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. |
|
||||
| `content` | string, element, function | `''` | The popover's text content. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
|
||||
| `customClass` | string, function | `''` | Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
|
||||
| `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 }`. |
|
||||
| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
|
||||
| `html` | boolean | `false` | Allow HTML in the popover. If true, HTML tags in the popover's `title` will be rendered in the popover. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
|
||||
| `offset` | number, string, function | `[0, 0]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `placement` | string, function | `'top'` | 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. |
|
||||
| `offset` | number, string, function | `[0, 8]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `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. |
|
||||
| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
|
||||
| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
|
||||
| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
|
||||
| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
|
||||
| `template` | string | `'<div class="popover" role="tooltip"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
|
||||
| `template` | string | `'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-header`. The popover's `content` will be injected into the `.popover-body`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
|
||||
| `title` | string, element, function | `''` | The popover title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
|
||||
| `trigger` | string | `'hover focus'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
|
||||
| `trigger` | string | `'click'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
|
||||
{{< /bs-table >}}
|
||||
|
||||
{{< callout info >}}
|
||||
|
|
|
|||
|
|
@ -75,13 +75,15 @@ Add labels to your progress bars by placing text within the `.progress-bar`.
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}), but make sure to also define an explicit [text color]({{< docsref "/utilities/colors#colors" >}}) so the text remains readable. Be aware though that currently this approach does not take into account [color modes]({{< docsref "/customize/color-modes" >}}).
|
||||
### Long labels
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}).
|
||||
|
||||
{{< callout warning >}}
|
||||
Labels longer than the progress bar within may not be fully accessible using this method because it relies on the text color having the correct contrast ratio with both the `.progress` and `.progress-bar` background colors. Use caution when implementing this example.
|
||||
|
||||
If the text can overlap the progress bar, we often recommend displaying the label outside of the progress bar for better accessibility.
|
||||
{{< /callout >}}
|
||||
|
||||
## Backgrounds
|
||||
|
||||
|
|
@ -106,29 +108,21 @@ Use background utility classes to change the appearance of individual progress b
|
|||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]({{< docsref "/utilities/colors#colors" >}}), so the labels remain readable and have sufficient contrast.
|
||||
If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]({{< docsref "/utilities/colors#colors" >}}), so the labels remain readable and have sufficient contrast. We recommend using the [color and background]({{< docsref "/helpers/color-background" >}}) helper classes.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-success" style="width: 25%">25%</div>
|
||||
<div class="progress-bar text-bg-success" style="width: 25%">25%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
|
||||
<div class="progress-bar text-bg-info" style="width: 50%">50%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-danger" style="width: 100%">100%</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Alternatively, you can use the new combined [color and background]({{< docsref "/helpers/color-background" >}}) helper classes.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-danger" style="width: 100%">100%</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Multiple bars
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ Click the button below to show a toast (positioned with our utilities in the low
|
|||
|
||||
We use the following JavaScript to trigger our live toast demo:
|
||||
|
||||
{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}
|
||||
{{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}
|
||||
|
||||
### Translucent
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ toc: true
|
|||
|
||||
Things to know when using the tooltip plugin:
|
||||
|
||||
- Tooltips rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
|
||||
- Tooltips rely on the third party library [Popper](https://popper.js.org/docs/v2/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
|
||||
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
- Tooltips with zero-length titles are never displayed.
|
||||
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
|
||||
|
|
@ -111,8 +111,8 @@ And with custom HTML added:
|
|||
With an SVG:
|
||||
|
||||
<div class="bd-example tooltip-demo">
|
||||
<a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
|
||||
<a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Hover or focus to see default tooltip">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
|
||||
<rect width="100%" height="100%" fill="#563d7c"/>
|
||||
<circle cx="50" cy="50" r="30" fill="#007bff"/>
|
||||
</svg>
|
||||
|
|
@ -200,12 +200,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
|
|||
| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
|
||||
| `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip. |
|
||||
| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
|
||||
| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. 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. |
|
||||
| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. 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. |
|
||||
| `customClass` | string, function | `''` | Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
|
||||
| `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 }`. |
|
||||
| `fallbackPlacements` | array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
|
||||
| `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. |
|
||||
| `offset` | array, string, function | `[0, 0]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `offset` | array, string, function | `[0, 6]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `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. |
|
||||
| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
|
||||
| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue