Angular Material

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

`MatTooltip`

把 Material Design 工具提示附加到宿主元素上的指令。会在工具提示指定的位置（默认在元素下方）进行动画显示和隐藏。

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

选择器： [matTooltip]

导出为： matTooltip

属性

名称	描述
@Input('matTooltipDisabled') `disabled: boolean`	禁止显示工具提示。 Disables the display of the tooltip.
@Input('matTooltipHideDelay') `hideDelay: number`	调用 hide 之后到隐藏工具提示之前的默认延迟（毫秒） 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: number`	调用 show 之后到显示工具提示之前的默认延迟（毫秒） The default delay in ms before showing the tooltip after show is called
@Input('matTooltipClass') `tooltipClass: any`	要传递给工具提示的类。语法和 `ngClass` 相同。 Classes to be passed to the tooltip. Supports the same syntax as `ngClass`.
@Input('matTooltipTouchGestures') `touchGestures: TooltipTouchGestures`	工具提示应如何处理触控手势。在触控设备上，工具提示指令会使用长按手势进行显示和隐藏，但是它可能与原生的浏览器手势冲突。为了解决这个冲突，Angular Material 会在触发器上禁用原生手势，但这可能不适用于特定的元素（例如输入框和可拖动的元素）。此选项有不同的值用来配置 touch 事件的处理方式，如下所示： 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` - 为所有元素启用触控手势，但会尽量避免与特定元素的原生浏览器手势冲突。它特别允许在 input 和 textarea 上进行文本选择，并保留原生浏览器中标记为 `draggable` 的元素上的拖曳效果。 `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` - 为所有元素启用触控手势，并禁用原生浏览器手势，没有例外。 `on` - Enables touch gestures for all elements and disables native browser gestures with no exceptions. `off` - 禁用触控手势。请注意，这会阻止在触控设备上显示工具提示。 `off` - Disables touch gestures. Note that this will prevent the tooltip from showing on touch devices.

方法

hide

hide
要延迟多少毫秒后隐藏工具提示，默认为 tooltip-delay-hide，如果没有输入则默认为 0ms Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input
delay `number = this.hideDelay`

要延迟多少毫秒后隐藏工具提示，默认为 tooltip-delay-hide，如果没有输入则默认为 0ms

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

参数

Parameters

delay

number = this.hideDelay

show

show
要延迟多少毫秒后显示工具提示，默认为 tooltip-delay-show，如果没有输入则默认为 0ms Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input
delay `number = this.showDelay`

要延迟多少毫秒后显示工具提示，默认为 tooltip-delay-show，如果没有输入则默认为 0ms

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

toggle

显示/隐藏工具提示

Shows/hides the tooltip

`MatTooltipDefaultOptions`

默认 matTooltip，可改写。

Default matTooltip options that can be overridden.

属性

名称	描述
`hideDelay: number`
`position: TooltipPosition`
`showDelay: number`
`touchGestures: TooltipTouchGestures`
`touchendHideDelay: number`

`TooltipPosition`

工具提示的可能位置。

Possible positions for a tooltip.

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

`TooltipTouchGestures`

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

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

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

`TooltipVisibility`

工具提示的可见性状态。

Possible visibility states of a tooltip.

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

`SCROLL_THROTTLE_MS`

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

Time in ms to throttle repositioning after scroll events.

const SCROLL_THROTTLE_MS: 20;

`TOOLTIP_PANEL_CLASS`

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

CSS class that will be attached to the overlay panel.

const TOOLTIP_PANEL_CLASS: "mat-tooltip-panel";

`MAT_TOOLTIP_SCROLL_STRATEGY`

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

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

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

`MAT_TOOLTIP_DEFAULT_OPTIONS`

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

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

const MAT_TOOLTIP_DEFAULT_OPTIONS: InjectionToken<MatTooltipDefaultOptions>;

import {MatTooltipHarness} from '@angular/material/tooltip/testing';

`MatTooltipHarness` extends ComponentHarness

在测试中用来与标准 mat-tooltip 进行交互的测试工具。

Harness for interacting with a standard mat-tooltip in tests.

方法

异步 getTooltipText
Gets a promise for the tooltip panel's text.
`Promise<string>`

异步

getTooltipText

Gets a promise for the tooltip panel's text.

返回值

Returns

Promise<string>

异步 hide
Hides the tooltip.
`Promise<void>`	Promise that resolves when the action completes.

异步

hide

Hides the tooltip.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 host
获取一个代表该组件宿主元素的 `TestElement` 型 `Promise`。 Gets a `Promise` for the `TestElement` representing the host element of the component.
`Promise<TestElement>`

异步

host

获取一个代表该组件宿主元素的 TestElement 型 Promise。

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>

异步 isOpen
Gets whether the tooltip is open.
`Promise<boolean>`

异步

isOpen

Gets whether the tooltip is open.

返回值

Returns

Promise<boolean>

异步 show
Shows the tooltip.
`Promise<void>`	Promise that resolves when the action completes.

异步

show

Shows the tooltip.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

`TooltipHarnessFilters`

A set of criteria that can be used to filter a list of MatTooltipHarness instances.

工具提示 API 目录

Testing

工具提示 Tooltip