MatTooltip 始终可见

Question

有没有一种方法可以将工具提示设置为在焦点上可见而不是在悬停时可见？我试图从 angular 官方文档中了解并在 SO 上搜索类似的问题，包括这个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

如果触发了焦点事件，工具提示将消失。您可能有两种解决方法：

一种。将工具提示放在一个隐藏的项目上，即一个 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
}

湾 制作一个你用 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;
}

演示