Angular Material 工具提示的 API 参考

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

`MatTooltip`

将 Material Design 工具提示附着到主体元素的指令。对工具提示提供的位置的显示和隐藏进行动画处理（默认为元素下方）。

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

选择器： [matTooltip]

Exported as: matTooltip

属性

名称	描述
@Input('matTooltipDisabled') `disabled: boolean`	禁止显示工具提示。
@Input('matTooltipHideDelay') `hideDelay: number`	调用 hide 之后到隐藏工具提示之前的默认延迟（毫秒）
@Input('matTooltip') `message: string`	要在工具提示中显示的消息是什么
@Input('matTooltipPosition') `position: TooltipPosition`	允许用户定义工具提示相对于父元素的位置
@Input('matTooltipPositionAtOrigin') `positionAtOrigin: boolean`	工具提示是否应相对于点击或触摸的原点，而不是元素边界框的外部。
@Input('matTooltipShowDelay') `showDelay: number`	调用 show 之后到显示工具提示之前的默认延迟（毫秒）
@Input('matTooltipClass') `tooltipClass: any`	要传递给工具提示的类。语法和 `ngClass` 相同。
@Input('matTooltipTouchGestures') `touchGestures: TooltipTouchGestures`	工具提示应如何处理触摸手势。在触摸设备上，工具提示指令会使用长按手势进行显示和隐藏，但是它可能与原生的浏览器手势冲突。为了解决这个冲突，Angular Material 会在触发器上禁用原生手势，但这可能不适用于特定的元素（例如输入框和可拖动的元素）。此选项有不同的值用来配置 touch 事件的处理方式，如下所示： `auto` - 为所有元素启用触摸手势，但会尽量避免与特定元素的原生浏览器手势冲突。它特别允许在 input 和 textarea 上进行文本选择，并保留原生浏览器中标记为 `draggable` 的元素上的拖曳效果。 `on` - 为所有元素启用触摸手势，并禁用原生浏览器手势，没有例外。 `off` - 禁用触摸手势。请注意，这会阻止在触摸设备上显示工具提示。

方法

hide
要延迟多少毫秒后隐藏工具提示，默认为 tooltip-delay-hide，如果没有输入则默认为 0ms
参数
delay `number = this.hideDelay`

show
要延迟多少毫秒后显示工具提示，默认为 tooltip-delay-show，如果没有输入则默认为 0ms
参数
delay `number = this.showDelay`
origin ? `{ x`

toggle
显示/隐藏工具提示
参数
origin ? `{ x`

`MatTooltipDefaultOptions`

默认 matTooltip，可改写。

属性

名称	描述
`disableTooltipInteractivity: boolean`	禁用用户与工具提示元素交互的能力。
`hideDelay: number`	隐藏工具提示时的默认延迟。
`position: TooltipPosition`	工具提示的默认位置。
`positionAtOrigin: boolean`	工具提示是否应位于单击或触摸原点附近而不是元素边界框外的默认值。
`showDelay: number`	显示工具提示时的默认延迟。
`touchGestures: TooltipTouchGestures`	工具提示的默认触摸手势处理。
`touchLongPressShowDelay: number`	用户将指针放在工具提示触发器上与在触摸设备上触发长按事件之间的时间间隔。
`touchendHideDelay: number`	在触摸设备上隐藏工具提示时的默认延迟。

`TooltipPosition`

工具提示的可能位置。

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

`TooltipTouchGestures`

工具提示触发器如何处理触摸手势的选项。有关更多信息，请参阅 MatTooltip.touchGestures。

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

`TooltipVisibility`

工具提示的可见性状态。

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

`SCROLL_THROTTLE_MS`

滚动事件后，对重新定位进行节流的毫秒数。

const SCROLL_THROTTLE_MS: 20;

`MAT_TOOLTIP_SCROLL_STRATEGY`

当工具提示可见的时候，这个注入令牌会决定滚动的处理方式。

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

`MAT_TOOLTIP_DEFAULT_OPTIONS`

这个注入令牌用来改写 matTooltip 的默认选项。

const MAT_TOOLTIP_DEFAULT_OPTIONS: InjectionToken<MatTooltipDefaultOptions>;

`TOOLTIP_PANEL_CLASS`

Deprecated

那些要附着到浮层面板上的 CSS 类。

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