aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/4.0/components/popovers.md11
-rw-r--r--docs/4.0/components/tooltips.md12
2 files changed, 23 insertions, 0 deletions
diff --git a/docs/4.0/components/popovers.md b/docs/4.0/components/popovers.md
index 808239314..fef7bd96e 100644
--- a/docs/4.0/components/popovers.md
+++ b/docs/4.0/components/popovers.md
@@ -111,6 +111,17 @@ $('.popover-dismiss').popover({
})
{% endhighlight %}
+### 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.
+
+For disabled popover triggers, you may also prefer `data-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 html %}
+<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
+ <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
+</span>
+{% endexample %}
## Usage
diff --git a/docs/4.0/components/tooltips.md b/docs/4.0/components/tooltips.md
index 2ea4c91cc..f04c65df3 100644
--- a/docs/4.0/components/tooltips.md
+++ b/docs/4.0/components/tooltips.md
@@ -109,6 +109,18 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
</div>
{% endhighlight %}
+### Disabled elements
+
+Elements with the `disabled` attribute aren't interactive, meaning users cannot 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>` and override the `pointer-events` on the disabled element.
+
+<div class="tooltip-demo">
+{% example html %}
+<span class="d-inline-block" data-toggle="tooltip" title="Disabled tooltip">
+ <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
+</span>
+{% endexample %}
+</div>
+
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.