MatTooltip, чтобы всегда быть видимым - PullRequest
Новая
       9

MatTooltip, чтобы всегда быть видимым

0 голосов
/ 13 января 2019

Есть ли способ, которым я могу настроить всплывающую подсказку, чтобы она отображалась в фокусе, а не при зависании? Я пытался понять из угловой официальной документации и искать похожий вопрос по SO, включая этот Всегда показывать подсказку (угловой материал2)

но я пока не вижу ничего полезного.

редактирование: мой код 

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

Я также попробовал TooltipVisibility = "Visible"

1 Ответ

0 голосов
/ 13 января 2019

Всплывающая подсказка исчезнет при срабатывании события фокусировки. У вас может быть два обходных пути:

а. Поместите всплывающую подсказку на скрытый элемент, т. Е. Элемент 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;
}

DEMO

...