diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index c3fe17ec24749640f814829f6276ac6ccc4a871f..eab9549bb8ac3292c7e77cddfb26ca209b69c9bd 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -76,6 +76,10 @@ $(function () { <h4>Don't try to show tooltips on hidden elements</h4> <p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p> </div> + <div class="bs-callout bs-callout-warning" id="callout-tooltip-accessibility"> + <h4>Accessible tooltips for keyboard and assistive technology users</h4> + <p>For users navigating with a keyboard, and in particular users of assistive technologies, you should only add tooltips to keyboard-focusable elements such as links, form controls, or any arbitrary element with a <code>tabindex="0"</code> attribute.</p> + </div> <div class="bs-callout bs-callout-info" id="callout-tooltip-disabled"> <h4>Tooltips on disabled elements require wrapper elements</h4> <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the tooltip to that <code><div></code> instead.</p>