Tooltip

API for tooltip

API reference for Angular Material tooltip

import {MatTooltipModule} from '@angular/material/tooltip';

Directive that attaches a material design tooltip to the host element. Animates the showing and hiding of a tooltip provided position (defaults to below the element).

https://material.io/design/components/tooltips.html

Selector: [matTooltip]

Exported as: matTooltip
Properties
NameDescription
@Input('matTooltipDisabled')

disabled: boolean

Disables the display of the tooltip.

@Input('matTooltipHideDelay')

hideDelay: this._defaultOptions.hideDelay

The default delay in ms before hiding the tooltip after hide is called

@Input('matTooltip')

message: string

The message to be displayed in the tooltip

@Input('matTooltipPosition')

position: TooltipPosition

Allows the user to define the position of the tooltip relative to the parent element

@Input('matTooltipShowDelay')

showDelay: this._defaultOptions.showDelay

The default delay in ms before showing the tooltip after show is called

@Input('matTooltipClass')

tooltipClass: string | string[] | Set<string> | { [key: string]: any; }

Classes to be passed to the tooltip. Supports the same syntax as ngClass.

Methods
hide

Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input

Parameters

delay

number = this.hideDelay

show

Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input

Parameters

delay

number = this.showDelay

toggle

Shows/hides the tooltip

Default matTooltip options that can be overridden.

Properties
NameDescription

hideDelay: number

showDelay: number

touchendHideDelay: number

Type: 'left' | 'right' | 'above' | 'below' | 'before' | 'after'

Type: 'initial' | 'visible' | 'hidden'