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 c3fe17ec24..eab9549bb8 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -76,6 +76,10 @@ $(function () {

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 | 54 +++++++++++++++++---------------- 1 file changed, 28 insertions(+), 26 deletions(-) diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index eab9549bb8..d606929ba8 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -68,6 +68,34 @@ $(function () { {% endhighlight %}
+ +

Usage

+

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

+

Trigger the tooltip via JavaScript:

+{% highlight js %} +$('#example').tooltip(options) +{% endhighlight %} + +

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

+ +{% highlight html %} + +Hover over me + + + +{% 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).

@@ -85,32 +113,6 @@ $(function () {

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.

-

Trigger the tooltip via JavaScript:

-{% highlight js %} -$('#example').tooltip(options) -{% endhighlight %} - -

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 - - - -{% endhighlight %} -

Options

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