Vue Material -

Tooltip

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:

Text position

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:

Delay

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:

Trigger

API - md-tooltip

The following options can be applied to all tooltips:

NameDescriptionDefault
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