Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.
You can setup a tooltip using optional direction and delay:
Direction
You can set the tooltip direction using the four available values - top, right, bottom and left:
Delay
Sometimes you don't want to pop the tooltip right away. To achieve that you can use a custom delay in milliseconds to postpone the action:
No delay
300ms
1s
Dynamically show a tooltip
In some cases we may want to trigger the tooltip manually, to make sure that your user will understand and action. You can do it:
API - md-tooltip
The following options can be applied to all tooltips:
| Name | Description | Default |
|---|---|---|
| md-direction String | Specifies where the tooltip will appear based on the parent element. | bottom |
| md-direction="top" String | Shows the tooltip above the parent element. | - |
| md-direction="right" String | Shows the tooltip after the parent element. | - |
| md-direction="bottom" String | Shows the tooltip below the parent element. | - |
| md-direction="left" String | Shows the tooltip before the parent element. | - |
| md-delay Number | Postpones the exhibition of a tooltip. In milliseconds. | 0 |
| md-active Boolean | Used to trigger the visibility of a tooltip. Should be used with the .sync modifier. | false |