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/alerts.md | 18 +++++---- docs/components/button-dropdown.md | 9 +++-- docs/components/button-group.md | 21 +++++----- docs/components/carousel.md | 27 +++++++------ docs/components/collapse.md | 19 ++++----- docs/components/dropdowns.md | 18 +++++---- docs/components/helpers.md | 37 ++++++++++-------- docs/components/modal.md | 50 ++++++++++++++---------- docs/components/popovers.md | 79 +++++++++++++++++++------------------- docs/components/scrollspy.md | 18 +++++---- docs/components/tooltips.md | 62 +++++++++++++----------------- 11 files changed, 189 insertions(+), 169 deletions(-) (limited to 'docs/components') diff --git a/docs/components/alerts.md b/docs/components/alerts.md index 796b463ba..83f34f5b7 100644 --- a/docs/components/alerts.md +++ b/docs/components/alerts.md @@ -7,10 +7,11 @@ Provide contextual feedback messages for typical user actions with the handful o Wrap any text and an optional dismiss button in `.alert` and one of the four contextual classes (e.g., `.alert-success`) for basic alert messages. -
-

No default class

-

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

-
+{% callout info %} +#### No default class + +Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger. +{% endcallout %} {% example html %} {% endexample %} -
-

Ensure proper behavior across all devices

-

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

-
+{% callout warning %} +#### Ensure proper behavior across all devices + +Be sure to use the ` {% endexample %} -#### Four directions +### Four directions
@@ -123,14 +122,15 @@ sagittis lacus vel augue laoreet rutrum faucibus."> {% endhighlight %} -#### Dismiss on next click +### Dismiss on next click Use the `focus` trigger to dismiss popovers on the next click that the user makes. -
-

Specific markup required for dismiss-on-next-click

-

For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include a tabindex attribute.

-
+{% callout danger %} +#### Specific markup required for dismiss-on-next-click + +For proper cross-browser and cross-platform behavior, you must use the `` tag, _not_ the `
-
-

Data attributes for individual popovers

-

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

-
+{% callout info %} +#### Data attributes for individual popovers + +Options for individual popovers can alternatively be specified through the use of data attributes, as explained above. +{% endcallout %} ### Methods diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md index 1164c7563..dde50fc2a 100644 --- a/docs/components/scrollspy.md +++ b/docs/components/scrollspy.md @@ -93,15 +93,17 @@ After adding `position: relative;` in your CSS, call the scrollspy via JavaScrip $('body').scrollspy({ target: '#navbar-example' }) {% endhighlight %} -
-

Resolvable ID targets required

-

Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

-
+{% callout danger %} +#### Resolvable ID targets required -
-

Non-:visible target elements ignored

-

Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.

-
+Navbar links must have resolvable id targets. For example, a `home` must correspond to something in the DOM like `
`. +{% endcallout %} + +{% callout info %} +#### Non-`:visible` target elements ignored + +Target elements that are not [`:visible` according to jQuery](http://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted. +{% endcallout %} ### Methods 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