diff options
| author | Florian Lacreuse <[email protected]> | 2020-12-15 08:17:58 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-12-15 09:17:58 +0200 |
| commit | e8d14b302e7bfe62d390a88a33119b9bb8c0a303 (patch) | |
| tree | b10536eac195aa697e3b2532dd35bdeb6a178850 | |
| parent | c3e8a0ef2aca85b57903bca0bd22c74a8379e37e (diff) | |
| download | bootstrap-e8d14b302e7bfe62d390a88a33119b9bb8c0a303.tar.xz bootstrap-e8d14b302e7bfe62d390a88a33119b9bb8c0a303.zip | |
Remove redundant `pointer-events: none` override for tooltip and popover disabled buttons (#32478)
Co-authored-by: Patrick H. Lauke <[email protected]>
Co-authored-by: XhmikosR <[email protected]>
| -rw-r--r-- | site/content/docs/5.0/components/popovers.md | 4 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/tooltips.md | 4 |
2 files changed, 4 insertions, 4 deletions
diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md index 0c6118790..817cd1ef1 100644 --- a/site/content/docs/5.0/components/popovers.md +++ b/site/content/docs/5.0/components/popovers.md @@ -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 >}} diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index 21becc626..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> |