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: number

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('matTooltipPositionAtOrigin')

positionAtOrigin: boolean

Whether tooltip should be relative to the click or touch origin instead of outside the element bounding box.
@Input('matTooltipShowDelay')

showDelay: number

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.
@Input('matTooltipTouchGestures')

touchGestures: TooltipTouchGestures

How touch gestures should be handled by the tooltip. On touch devices the tooltip directive uses a long press gesture to show and hide, however it can conflict with the native browser gestures. To work around the conflict, Angular Material disables native gestures on the trigger, but that might not be desirable on particular elements (e.g. inputs and draggable elements). The different values for this option configure the touch event handling as follows:

  • auto - Enables touch gestures for all elements, but tries to avoid conflicts with native browser gestures on particular elements. In particular, it allows text selection on inputs and textareas, and preserves the native browser dragging on elements marked as draggable.
  • on - Enables touch gestures for all elements and disables native browser gestures with no exceptions.
  • off - Disables touch gestures. Note that this will prevent the tooltip from showing on touch devices.
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

origin?

{ x: number; y: number; }

toggle

Shows/hides the tooltip
Parameters

origin?

{ x: number; y: number; }

Default matTooltip options that can be overridden.

Properties
Name Description

disableTooltipInteractivity: boolean

Disables the ability for the user to interact with the tooltip element.

hideDelay: number

Default delay when the tooltip is hidden.

position: TooltipPosition

Default position for tooltips.

positionAtOrigin: boolean

Default value for whether tooltips should be positioned near the click or touch origin instead of outside the element bounding box.

showDelay: number

Default delay when the tooltip is shown.

tooltipClass: string | string[]

Default classes to be applied to the tooltip. These default classes will not be applied if tooltipClass is defined directly on the tooltip element, as it will override the default.

touchGestures: TooltipTouchGestures

Default touch gesture handling for tooltips.

touchLongPressShowDelay: number

Time between the user putting the pointer on a tooltip trigger and the long press event being fired on a touch device.

touchendHideDelay: number

Default delay when hiding the tooltip on a touch device.

Possible positions for a tooltip.

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

Options for how the tooltip trigger should handle touch gestures. See MatTooltip.touchGestures for more information.

type TooltipTouchGestures = 'auto' | 'on' | 'off';

Possible visibility states of a tooltip.

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

Time in ms to throttle repositioning after scroll events.

const SCROLL_THROTTLE_MS: 20;

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>;
Deprecated

CSS class that will be attached to the overlay panel.

const TOOLTIP_PANEL_CLASS: "mat-mdc-tooltip-panel";