From 466d36e54175ee00927d6518d9481acd2d210590 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 Apr 2015 16:56:40 -0700 Subject: Redo all our callouts with the custom callout plugin - Replaces manual use of .bd-callout with {% callout [type] %} - Rearranged some callouts for proximity to others - Turned long lists of callouts--like those on tooltips, plugings, etc--into a list because holy shit that's overwhelming --- docs/components/tooltips.md | 62 ++++++++++++++++++++------------------------- 1 file changed, 27 insertions(+), 35 deletions(-) (limited to 'docs/components/tooltips.md') diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index b8600d912..3bb3763d5 100644 --- a/docs/components/tooltips.md +++ b/docs/components/tooltips.md @@ -3,11 +3,30 @@ layout: page title: Tooltips --- -## Examples - Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage. -Tooltips with zero-length titles are never displayed. +## Overview + +Things to know when using the popover plugin: + +- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**. +- Tooltips with zero-length titles are never displayed. +- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). +- Triggering tooltips on hidden elements will not work. +- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element. +- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your ``s to avoid this behavior. + +## Example: Enable popovers everywhere + +One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute: + +{% highlight js %} +$(function () { + $('[data-toggle="tooltip"]').tooltip() +}) +{% endhighlight %} + +## Examples Hover over the links below to see tooltips: @@ -75,29 +94,6 @@ Hover over the buttons below to see their tooltips. {% endhighlight %} -
-

Opt-in functionality

-

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

-

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

-{% highlight js %} -$(function () { - $('[data-toggle="tooltip"]').tooltip() -}) -{% 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. @@ -112,11 +108,6 @@ $('#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). -
-

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 @@ -228,10 +219,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap -
-

Data attributes for individual tooltips

-

Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.

-
+{% callout info %} +#### Data attributes for individual tooltips + +Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above. +{% endcallout %} ### Methods -- cgit v1.2.3