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

Issue

Is there a way in which I can set the tooltip to be visible on focus instead of upon hovering?

I've tried to understand from angular official documentation and search similar question on SO including this one Always Show Tooltip ( Angular Material2), but I don't see something helpful so far.

My code is:

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

I also tried TooltipVisibility = "Visible" with no success

Solution

The tooltip will disappear if a focus event is fired.

You may have two workarounds:

a. Put the tooltip on a hidden element, i.e. a div, and make it appear on the input focus. But the input should not have any tooltip:

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. Make a fake tooltip that you show/hide with 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

Answered By - Vega