aboutsummaryrefslogtreecommitdiff
path: root/site/content/docs/5.0/components
diff options
context:
space:
mode:
authorXhmikosR <[email protected]>2020-12-15 11:24:13 +0200
committerXhmikosR <[email protected]>2020-12-15 11:24:13 +0200
commitea9c7e735b2593229a504d53e986eb38cacc7066 (patch)
tree5a872f8f959232592bb0aa34cc5b4dbb7ecbc364 /site/content/docs/5.0/components
parente5933330e1e3c363d240035d67f97ec094577d91 (diff)
parentcc3a5cf79a5afd73a97dce380f93e0d192a34456 (diff)
downloadbootstrap-rohit/main/modal-with-sticky.tar.xz
bootstrap-rohit/main/modal-with-sticky.zip
Merge remote-tracking branch 'remotes/origin/main' into rohit/main/modal-with-stickyrohit/main/modal-with-sticky
Diffstat (limited to 'site/content/docs/5.0/components')
-rw-r--r--site/content/docs/5.0/components/popovers.md26
-rw-r--r--site/content/docs/5.0/components/toasts.md2
-rw-r--r--site/content/docs/5.0/components/tooltips.md10
3 files changed, 19 insertions, 19 deletions
diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md
index 0a16f89e1..817cd1ef1 100644
--- a/site/content/docs/5.0/components/popovers.md
+++ b/site/content/docs/5.0/components/popovers.md
@@ -64,35 +64,35 @@ Four options are available: top, right, bottom, and left aligned. Directions are
<div class="bd-example popover-demo">
<div class="bd-example-popovers">
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
</div>
</div>
```html
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
```
@@ -119,13 +119,13 @@ var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'),
### Disabled elements
-Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>` and override the `pointer-events` on the disabled element.
+Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`.
For disabled popover triggers, you may also prefer `data-bs-trigger="hover"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
{{< example >}}
<span class="d-inline-block" data-bs-toggle="popover" data-bs-content="Disabled popover">
- <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
+ <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
{{< /example >}}
@@ -249,9 +249,9 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
</tr>
<tr>
<td><code>fallbackPlacements</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
+ <td>array</td>
+ <td><code>['top', 'right', 'bottom', 'left']</code></td>
+ <td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to
Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td>
</tr>
<tr>
diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index 740a926f9..b6f7e3893 100644
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.0/components/toasts.md
@@ -137,7 +137,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
{{< example >}}
<form>
- <div class="form-group mb-3">
+ <div class="mb-3">
<label for="selectToastPlacement">Toast placement</label>
<select class="form-select mt-2" id="selectToastPlacement">
<option value="" selected>Select a position...</option>
diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md
index 6f0bde9dc..70ba7f6d5 100644
--- a/site/content/docs/5.0/components/tooltips.md
+++ b/site/content/docs/5.0/components/tooltips.md
@@ -145,12 +145,12 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
### Disabled elements
-Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`, and override the `pointer-events` on the disabled element.
+Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
<div class="tooltip-demo">
{{< example >}}
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
- <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
+ <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
{{< /example >}}
</div>
@@ -254,9 +254,9 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
</tr>
<tr>
<td><code>fallbackPlacements</code></td>
- <td>null | array</td>
- <td><code>null</code></td>
- <td>Allow to specify which position Popper will use on fallback. For more information refer to
+ <td>array</td>
+ <td><code>['top', 'right', 'bottom', 'left']</code></td>
+ <td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to
Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td>
</tr>
<tr>