Commit debcb1de authored by Patrick H. Lauke's avatar Patrick H. Lauke
Browse files

Callout for tooltips and keyboard/AT accessibility

Include callout explicitly mentioning tooltips should only be added to
focusable elements. Closes #16134
parent e22a73fd
5 merge requests!28721Hot test,!16605Test pull please ignore,!22103test,!25326Adjust examples,!16136Callout for tooltips and keyboard/AT accessibility
Showing with 4 additions and 0 deletions
+4 -0
......@@ -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>&lt;div&gt;</code> and apply the tooltip to that <code>&lt;div&gt;</code> instead.</p>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment