diff --git a/docs/4.0/components/popovers.md b/docs/4.0/components/popovers.md index 808239314c..fef7bd96ea 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 `
` or `` 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 %} + + + +{% endexample %} ## Usage diff --git a/docs/4.0/components/tooltips.md b/docs/4.0/components/tooltips.md index 2ea4c91cc4..f04c65df3d 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
{% 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 `
` or `` and override the `pointer-events` on the disabled element. + +
+{% example html %} + + + +{% endexample %} +
+ ### Options Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.