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

user_9793850 0
Viewed 12635

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

angular-material angular tooltip
2 Answers

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

user_54684630

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>
user_112739970
Related