diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index c3fe17ec2..d606929ba 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -68,18 +68,6 @@ $(function () { {% 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.

-
-
-

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.

@@ -90,10 +78,7 @@ $('#example').tooltip(options)

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 @@ -107,6 +92,27 @@ $('#example').tooltip(options) {% 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="".