Подсказка неправильно выравнивается для небольших устройств

Question

Я использую всплывающую подсказку для mini-fab button, как показано в приведенном ниже коде:

HTML

 <span class="right">
     <button  mat-mini-fab matTooltip="John Doe"  [matTooltipPosition]="position.value" color="accent">
          <mat-icon>perm_identity</mat-icon>
     </button>
 </span>

ц

public positionOptions: TooltipPosition[] = ['left'];
public position = new FormControl(this.positionOptions[0]); 

Здесь подсказка отображается слева, как показано на рисунке ниже.

Отображается правильно только для более крупных устройств.

Когда я изменяю размер окна браузера (например, для небольших устройств), оно переполняется следующим образом.

Я пытался использовать свойство position , но ничего не получилось.