|
| 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