Skip to content

Commit 634bd0f

Browse files
andrewseguinjelbourn
authored andcommitted
docs(tooltip): add overview (#2335)
* docs(tooltip): add overview * add show/hide to overview
1 parent 81bcea1 commit 634bd0f

File tree

1 file changed

+35
-0
lines changed

1 file changed

+35
-0
lines changed

src/lib/tooltip/OVERVIEW.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
The Angular Material tooltip provides a text label that is displayed with the user hovers
2+
over or longpresses an element.
3+
4+
<!-- example(tooltip-overview) -->
5+
6+
##Positioning
7+
8+
The tooltip will be displayed below the element but this can be configured using the `mdTooltipPosition`
9+
input.
10+
The tooltip can be displayed above, below, left, or right of the element. By default the position
11+
will be below. If the tooltip should switch left/right positions in an RTL layout direction, then
12+
the positions `before` and `after` should be used instead of `left` and `right`, respectively.
13+
14+
| Position | Description |
15+
|-----------|---------------------------------------------------------------------------------------|
16+
| `above` | Always display above the element |
17+
| `below ` | Always display beneath the element |
18+
| `left` | Always display to the left of the element |
19+
| `right` | Always display to the right of the element |
20+
| `before` | Display to the left in left-to-right layout and to the right in right-to-left layout |
21+
| `after` | Display to the right in left-to-right layout and to the right in right-to-left layout |
22+
23+
24+
##Show and Hide
25+
26+
The tooltip is immediately shown when the user's mouse hovers over the element and immediately
27+
hides when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through
28+
the inputs `mdTooltipShowDelay` and `mdTooltipHideDelay`.
29+
30+
On mobile, the tooltip is displayed when the user longpresses the element and hides after a
31+
delay of 1500ms.
32+
33+
The tooltip can also be shown and hidden through the `show` and `hide` directive methods,
34+
which both accept a number in milliseconds to delay before applying the display change.
35+

0 commit comments

Comments
 (0)