MatTooltip 是 Angular Material 中的一个组件，可以在用户鼠标悬停在某个元素上时，以浮动框的形式展示提示信息。在前端开发中，我们经常需要给用户提供一些额外的信息来提示他们如何使用页面上的元素，这时候 MatTooltip 组件就可以派上用场了。
本文将详细介绍如何在 Angular 中使用 MatTooltip 组件。
安装
要使用 MatTooltip，首先需要安装 Angular Material。
ng add @angular/material
基本用法
要在一个元素上展示 MatTooltip 提示信息，只需要将 matTooltip 指令绑定在该元素上，并将提示信息传递给它即可：
<!-- HTML --> <button mat-button matTooltip="提示信息">按钮</button>
MatTooltip 的默认行为是在外部浮动框中展示提示信息，但是我们也可以通过添加多个属性来自定义展示方式：
<!-- HTML --> <button mat-button matTooltip="提示信息" matTooltipPosition="above">按钮</button>
此时提示信息将在目标元素的上方展示。此外，还可以通过 matTooltipClass 属性自定义样式。
高级用法
如果我们需要在某个条件下才展示提示信息，或者需要根据用户操作动态更新提示信息，该怎么办呢？
我们可以使用 MatTooltip 组件提供的 @ViewChild 装饰器来获取对该组件实例的引用，然后通过它来更新提示信息：
<!-- HTML --> <button mat-button #tooltip="matTooltip" (mouseover)="updateTooltip()">按钮</button>
-- -------------------- ---- -------
-- ----------
------ - ---------- --------- - ---- ----------------
------ - ---------- - ---- ----------------------------
------------
--------- ----------------------
--------- -
------- ---------- --------------------- -----------------------------------------
--
--
------ ----- ----------------------- -
---------------------- -------- -----------
--------------- -
-------------------- - -----------
-
-在上面的示例中，我们通过 #tooltip="matTooltip" 将 MatTooltip 组件实例绑定在了模板变量 tooltip 上，然后在 updateTooltip() 方法中更新了提示信息。这样，鼠标悬停在按钮上时，就会动态展示更新后的提示信息了。
总结
MatTooltip 是 Angular Material 中一个非常实用的组件，可以帮助我们给用户提供更好的交互体验。本文介绍了 MatTooltip 的基本用法和高级用法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a17d5448841e9894dbc1dc