Question

有没有一种方法可以将工具提示设置为焦点可见而不是悬停可见？我试图从有角度的官方文档中理解，并在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

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

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

MatTooltip始终可见

1 个答案: