Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix disabled element tooltip stackblitz #38623

Merged
merged 4 commits into from May 31, 2023
Merged

Fix disabled element tooltip stackblitz #38623

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7b0ec91
Load js for disabled button tooltip stackblitz
haggerty-ian May 19, 2023
d10e4d5
Remove surrounding useless `<div>`
julien-deramond May 19, 2023
96d6009
Merge branch 'main' into docs-fix-disabled-button-tooltip-stackblitz
julien-deramond May 19, 2023
6e691c6
Merge branch 'main' into docs-fix-disabled-button-tooltip-stackblitz
XhmikosR May 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 1 addition & 3 deletions site/content/docs/5.3/components/tooltips.md
View file
Open in desktop
Expand Up @@ -177,13 +177,11 @@ The required markup for a tooltip is only a `data` attribute and `title` on the

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 >}}
{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
{{< /example >}}
</div>

### Options

Expand Down