diff options
| author | Florian Lacreuse <[email protected]> | 2020-12-20 19:28:58 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-12-20 20:28:58 +0200 |
| commit | 86802f701cdff9a2fe91278fe42684a32426bc61 (patch) | |
| tree | ec17e4368cb4e0132f4b70f6efe3e0182c2953cb | |
| parent | e46891773152c9ef2befa39d331847bae56632d3 (diff) | |
| download | bootstrap-86802f701cdff9a2fe91278fe42684a32426bc61.tar.xz bootstrap-86802f701cdff9a2fe91278fe42684a32426bc61.zip | |
Add keyboard-focusable elements for popover on disabled button (#32490)
| -rw-r--r-- | site/content/docs/5.0/components/popovers.md | 6 |
1 files changed, 3 insertions, 3 deletions
diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md index 10072ad62..ccaf1f63f 100644 --- a/site/content/docs/5.0/components/popovers.md +++ b/site/content/docs/5.0/components/popovers.md @@ -99,12 +99,12 @@ 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>`. +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>`, ideally made keyboard-focusable using `tabindex="0"`. -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. +For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` 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"> +<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover"> <button class="btn btn-primary" type="button" disabled>Disabled button</button> </span> {{< /example >}} |