Angular 18 Material Tooltip如何添加及自定义边框？

先解决无法查看Tooltip DOM的问题 #

要调试Tooltip样式，得先让它固定显示：

• 方法1：给mat-tooltip组件添加[showDelay]="0"，鼠标移上去后Tooltip会一直显示（直到页面刷新）
• 方法2：打开浏览器控制台，执行命令：

  document.querySelector('mat-tooltip-component').show()
  

  执行后Tooltip会强制显示，就能在Elements面板里查看它的DOM结构了。

添加边框的具体方法 #

Material的Plain Tooltip并没有暴露边框相关的CSS变量，你之前试的--mdc-plain-tooltip-container-border是无效的，得直接给Tooltip的容器元素写样式：

方法1：全局样式（推荐） #

在项目根目录的styles.scss（或styles.css）里添加：

.mdc-plain-tooltip__surface {
  border: 1px solid blue;
  /* 可配合你之前设置的变量保持样式统一 */
  background-color: var(--mdc-plain-tooltip-container-color);
  color: var(--mdc-plain-tooltip-supporting-text-color);
}

方法2：组件内样式（需穿透隔离） #

如果只想给当前组件的Tooltip加边框，在组件的.component.scss里用::ng-deep（注意：::ng-deep未来可能被废弃，优先用全局样式）：

::ng-deep .mdc-plain-tooltip__surface {
  border: 1px solid blue;
}

这样设置后，Tooltip就能显示你想要的边框了。

内容的提问来源于stack exchange，提问作者TheCuBeMan