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

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

angularangular-materialtooltip


Solution 1:[1]

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

Solution 2:[2]

I'm not sure a tooltip is your best option here. It's hard to tell exactly what you want without seeing your existing code.

If you're using the Angular Material form field component, you can use the hint label for your message instead of a tooltip. This keeps the message always visible and associated with the form field as the component automatically uses aria-describedby attribute to link the hint to the input. That's a great A11Y win.

<mat-form-field appearance="fill">
    <mat-label>Enter some input</mat-label>
    <input matInput #input maxlength="10">
    <mat-hint>Fill in the field and then click "Enter"</mat-hint>
</mat-form-field>

You could also use a suffix to insert an icon button with the tooltip. The user can tab to the button to focus it, which will display the tooltip. And you can add a toggle to the button so the user can show/hide the tooltip with the keyboard, mouse click, or touch event.

<mat-form-field appearance="fill">
  <mat-label>Enter some input</mat-label>
  <input matInput #input maxlength="10" />
  <button
    #tooltip="matTooltip"
    (click)="$event.stopPropagation(); tooltip.toggle()"
    mat-icon-button
    matSuffix
    matTooltip="Fill in the field and then click "Enter""
  >
    <mat-icon>info</mat-icon>
  </button>
</mat-form-field>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Bryan Sullivan

Related Questions