summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.3/components/tooltips.md
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2023-08-06 07:58:36 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2023-08-06 07:58:36 +0000
commit548342184e2173d6f39aba2462196ff8b397db8f (patch)
tree995bd2844c5f4e453bdd21d27ff0417af1c910c5 /site/content/docs/5.3/components/tooltips.md
parentAdding upstream version 5.3.0+dfsg. (diff)
downloadbootstrap-html-548342184e2173d6f39aba2462196ff8b397db8f.tar.xz
bootstrap-html-548342184e2173d6f39aba2462196ff8b397db8f.zip
Adding upstream version 5.3.1+dfsg.upstream/5.3.1+dfsg
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'site/content/docs/5.3/components/tooltips.md')
-rw-r--r--site/content/docs/5.3/components/tooltips.md8
1 files changed, 3 insertions, 5 deletions
diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
index cf628e3..91adacc 100644
--- a/site/content/docs/5.3/components/tooltips.md
+++ b/site/content/docs/5.3/components/tooltips.md
@@ -157,7 +157,7 @@ const tooltip = new bootstrap.Tooltip('#example', {
The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
{{< callout warning >}}
-**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make theme impossible to trigger for keyboard users.
+**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make them impossible to trigger for keyboard users.
{{< /callout >}}
```html
@@ -165,7 +165,7 @@ The required markup for a tooltip is only a `data` attribute and `title` on the
<a href="#" data-bs-toggle="tooltip" data-bs-title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
-<div class="tooltip bs-tooltip-top" role="tooltip">
+<div class="tooltip bs-tooltip-auto" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
@@ -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