From debcb1de594f98eb973d3a33848d6c1646f416d7 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 23 Mar 2015 21:53:30 +0000 Subject: [PATCH 1/2] Callout for tooltips and keyboard/AT accessibility Include callout explicitly mentioning tooltips should only be added to focusable elements. Closes #16134 --- docs/_includes/js/tooltips.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index c3fe17ec2474..eab9549bb8ac 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -76,6 +76,10 @@

Tooltips in button groups and input groups require special setting

Don't try to show tooltips on hidden elements

Invoking $(...).tooltip('show') when the target element is display: none; will cause the tooltip to be incorrectly positioned.

+
+

Accessible tooltips for keyboard and assistive technology users

+

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 tabindex="0" attribute.

+

Tooltips on disabled elements require wrapper elements

To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.

From 6c2548e031002dac13f4ea1642f00f57ed949aae Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 23 Mar 2015 22:06:22 +0000 Subject: [PATCH 2/2] Move all tooltip callouts into appropriate section Before, most callouts hierarchically came under Examples > Four directions, which is not appropriate. Now they're under Markup --- docs/_includes/js/tooltips.html | 42 +++++++++++++++++---------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index eab9549bb8ac..d606929ba8e8 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -68,22 +68,6 @@

Opt-in functionality

{% endhighlight %}
-
-

Tooltips in button groups and input groups require special setting

-

When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

-
-
-

Don't try to show tooltips on hidden elements

-

Invoking $(...).tooltip('show') when the target element is display: none; will cause the tooltip to be incorrectly positioned.

-
-
-

Accessible tooltips for keyboard and assistive technology users

-

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 tabindex="0" attribute.

-
-
-

Tooltips on disabled elements require wrapper elements

-

To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.

-

Usage

The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.

@@ -94,10 +78,7 @@

Usage

Markup

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).

-
-

Multiple-line links

-

Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

-
+ {% highlight html %} Hover over me @@ -111,6 +92,27 @@

Multiple-line links

{% endhighlight %} +
+

Multiple-line links

+

Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

+
+
+

Tooltips in button groups and input groups require special setting

+

When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

+
+
+

Don't try to show tooltips on hidden elements

+

Invoking $(...).tooltip('show') when the target element is display: none; will cause the tooltip to be incorrectly positioned.

+
+
+

Accessible tooltips for keyboard and assistive technology users

+

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 tabindex="0" attribute.

+
+
+

Tooltips on disabled elements require wrapper elements

+

To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.

+
+

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".