Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(tooltip): add overview #2335

Merged
merged 2 commits into from
Dec 22, 2016
Merged

docs(tooltip): add overview #2335

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
45235e1
docs(tooltip): add overview
andrewseguin Dec 21, 2016
f4a14ac
add show/hide to overview
andrewseguin Dec 22, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions src/lib/tooltip/OVERVIEW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
The Angular Material tooltip provides a text label that is displayed with the user hovers
over or longpresses an element.

<!-- example(tooltip-overview) -->

##Positioning

The tooltip will be displayed below the element but this can be configured using the `mdTooltipPosition`
input.
The tooltip can be displayed above, below, left, or right of the element. By default the position
will be below. If the tooltip should switch left/right positions in an RTL layout direction, then
the positions `before` and `after` should be used instead of `left` and `right`, respectively.

| Position | Description |
|-----------|---------------------------------------------------------------------------------------|
| `above` | Always display above the element |
| `below ` | Always display beneath the element |
| `left` | Always display to the left of the element |
| `right` | Always display to the right of the element |
| `before` | Display to the left in left-to-right layout and to the right in right-to-left layout |
| `after` | Display to the right in left-to-right layout and to the right in right-to-left layout |


##Show and Hide

The tooltip is immediately shown when the user's mouse hovers over the element and immediately
hides when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through
the inputs `mdTooltipShowDelay` and `mdTooltipHideDelay`.

On mobile, the tooltip is displayed when the user longpresses the element and hides after a
delay of 1500ms.

The tooltip can also be shown and hidden through the `show` and `hide` directive methods,
which both accept a number in milliseconds to delay before applying the display change.