Tooltip Not Showing in correct place

Question

I am using MatTooltipModule in my application as such

<div class="input-group" matTooltipPosition="right"
     matTooltip= "If you have multiple valve sizes this cost of ownership form needs to be completed for each size.">
  <input class="form-control" type="number" [(ngModel)]="cons.valveNumber" [ngModelOptions]="{standalone: true}"/>
</div>

but when I run the code, the tooltip is on the left instead of the right. Why is it showing up on the left?

Edit: If the tooltip does not fit on the right side, does the matTooltipModule automatcially move it to the left? If it does, how can you leave it on the right?

Answer 1

It's because you should use [matTooltipPosition]="'right'", don't forget brackets and pass a string (I guess that you mean right as a string in your case, not a variable which keeps a string).

Here is a full list of tooltip positions:

"before"
"after"
"above"
"below"
"left"
"right"

I also suggest to take a look at "after" position, may be it's what you are looking for.