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
Name Description
@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: 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
Name Description

hideDelay: number

position: TooltipPosition

showDelay: number

touchendHideDelay: number 

type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';

type TooltipVisibility = 'initial' | 'visible' | 'hidden';

Time in ms to throttle repositioning after scroll events.

const SCROLL_THROTTLE_MS: 20;

CSS class that will be attached to the overlay panel.

const TOOLTIP_PANEL_CLASS: "mat-tooltip-panel";

Injection token that determines the scroll handling while a tooltip is visible.

const MAT_TOOLTIP_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;

Injection token to be used to override the default options for matTooltip.

const MAT_TOOLTIP_DEFAULT_OPTIONS: InjectionToken<MatTooltipDefaultOptions>;