如何使 MatTooltip 在焦点上可见而不是悬停？

Question

有没有一种方法可以将工具提示设置为在获得焦点时可见而不是在悬停时可见？

我试图从 angular 官方文档中理解并搜索关于 SO 的类似问题，包括这个，但到目前为止我没有看到任何有用的东西。

我的代码是：

<input
  matTooltipPosition="above"
  matTooltipClass="my-tooltip"
  matTooltip='Fill in the field and then click "Enter"'
  (focus)="tooltip.show()"
  #tooltip="matTooltip">

我也试过TooltipVisibility = "Visible"没有成功

Answer 1

如果触发焦点事件，工具提示将消失。

您可能有两种解决方法：

一个。将工具提示放在隐藏元素上，即 div，并使其出现在输入焦点上。但是输入不应该有任何工具提示：

HTML:

<input (focus)="tooltip.show()">
<div class="hiddenTooltip"
     matTooltipPosition="below"
     matTooltipClass="my-tooltip"
     matTooltip='Fill in the field and then click "Enter"'
     #tooltip="matTooltip">
</div>

CSS:

.hiddenTooltip {
  position: absolute;
  visibility: hidden;
  left: 0;
  width: 0;
  top: 3em
}

b。使用 ngIf:

制作一个假的工具提示 show/hide

HTML

<input (focus)="show=true" (blur)="show=false">
<div #tooltip *ngIf="show" class="fakeTooltip">
  Fill in the field and then click "Enter"
</div>

CSS:

.fakeTooltip {
  background: rgb(65, 64, 64);
  border-radius: 0.25em;
  padding: 0.75em;
  display: block;
  z-index: 2;
  color: white;
  height: fit-content;
  width: fit-content;
}

Demo

Answer 2

我不确定工具提示是否是您的最佳选择。如果不查看现有代码，很难准确地说出您想要什么。

如果您使用的是 Angular Material 表单字段组件，则可以使用消息提示标签代替工具提示。这使消息始终可见并与表单字段关联，因为组件自动使用 aria-describedby 属性来 link 输入提示。这是 A11Y 的伟大胜利。

<mat-form-field appearance="fill">
    <mat-label>Enter some input</mat-label>
    <input matInput #input maxlength="10">
    <mat-hint>Fill in the field and then click "Enter"</mat-hint>
</mat-form-field>

您还可以使用后缀插入带有工具提示的图标按钮。用户可以使用 Tab 键来聚焦它，这将显示工具提示。您还可以向按钮添加切换，以便用户可以 show/hide 通过键盘、鼠标单击或触摸事件显示工具提示。

<mat-form-field appearance="fill">
  <mat-label>Enter some input</mat-label>
  <input matInput #input maxlength="10" />
  <button
    #tooltip="matTooltip"
    (click)="$event.stopPropagation(); tooltip.toggle()"
    mat-icon-button
    matSuffix
    matTooltip="Fill in the field and then click "Enter""
  >
    <mat-icon>info</mat-icon>
  </button>
</mat-form-field>

如何使 MatTooltip 在焦点上可见而不是悬停？

How to make MatTooltip to be visible on focus instead of hover?

tooltip

angular-material

angular