matTooltip не работает с угловым кликом при наведении курсора мыши на компонент

Question

Я использую Angular6 с angular-cli-6.0.8. При использовании matTooltip при наведении мыши я получаю изменение положения компонента (заголовка) и mouseOut - это нормальное поведение. Ниже приведен код:

<div #HeaderMenu>
    <div id="headerMenu" *ngIf="isHeaderButtonOpenStatus" style="display:block">
        <div class="right-h" *ngFor="let head of commonService.AllHeaderRoutingList">
            <a  [routerLink]="head.routerLink">
                <img class="addOnBtn" [id]="head.id" [src]="getSource(head)" [matTooltip]="head.title" (click)="setActive(head.id, head.source, head); toggleHeader()" />
            </a>
            <div [ngStyle]="{'background-color': head.isRouter ? '#0074BA' : '#232323' }" matTooltip="Pin to the top" (click)="setHeaderRouting(head)" class="isRouter"> </div>
        </div>
    </div>
</div>

Так что, если вы видите в приведенном выше коде при наведении мыши на элемент <a ...</a>and <div [ngStyle]....</div>

Всего <div #HeaderMenu> ....</div> - это небольшой сдвиг сверху вниз. Другими словами, создание пустого пространства в верхней части заголовка (см. Изображение ниже). при наведении мыши на заголовок кнопки изображения. Изменение положения компонента

Пожалуйста, помогите.

Answer 1

Использование mdToolTip= "{{ your ngFor expression}}".