Add accessibility callout for tooltips

diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index bba918d9dc0cd2f4a284929c3bb00ec297010794..204c2ddaa01728424ef23dc3d0b0fbde0a9b4350 100644 (file)
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -117,6 +117,12 @@ $('#example').tooltip(options)
 
 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 %}
+#### Making tooltips work for keyboard and assistive technology users
+
+You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation.
+{% endcallout %}
+
 {% highlight html %}
 <!-- HTML to write -->
 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>