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

Question

有没有办法可以将工具提示设置为在焦点上而不是悬停时可见？

我试图从 Angular 官方文档中理解并搜索类似的问题，包括这个 Always Show Tooltip ( Angular Material2) ，但到目前为止我还没有看到任何有用的东西。

我的代码是:

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

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

Answer 1

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

您可能有两种解决方法:

a.将工具提示放在隐藏元素(即 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 显示/隐藏的假工具提示:

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