Vue Material -


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:


You can set the tooltip direction using the four available values - top, right, bottom and left:

Text position


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:


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:

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