diff options
| author | Patrick H. Lauke <[email protected]> | 2015-12-26 20:41:48 +0000 |
|---|---|---|
| committer | Patrick H. Lauke <[email protected]> | 2015-12-26 20:41:48 +0000 |
| commit | 699c6bb383d0c0179ff0b895ce0520b005db28b1 (patch) | |
| tree | 454938bda3b2a307e617316f570a0962090c103c | |
| parent | 807a1496024781a8f88e47401d56c93f7b76ca22 (diff) | |
| parent | b14c7f1e17ae520901e4ca6fa5c011ec804fcbc1 (diff) | |
| download | bootstrap-699c6bb383d0c0179ff0b895ce0520b005db28b1.tar.xz bootstrap-699c6bb383d0c0179ff0b895ce0520b005db28b1.zip | |
Merge pull request #18690 from patrickhlauke/docs-tooltips1
Docs: add accessibility callout for tooltips
| -rw-r--r-- | docs/components/tooltips.md | 6 |
1 files changed, 6 insertions, 0 deletions
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index bba918d9d..204c2ddaa 100644 --- 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> |