Why does hovering on component does multiple http calls using async?

I have a component in angular which shows a value

On hovering over the "i" icon we need to show some data after doing an Http call .

Earlier the api call was done in component when we hover on the icon , some due to the api call the popup content was blank initially . So I decided to do the Http call to on hovering the component. But now there are multiple http call done

Parent Component

<dd id="productUnspsc">
    <bifrost-classification-popup
      [classificationCode]="product?.unspsc"
      (mouseover)="getClasificationTree(unspsc ,product?.unspsc)"
      [classificationTree]= "classificationTree$ | async">
    </bifrost-classification-popup>
  </dd>
  <dt [translate]="'products.detail.eclass'"></dt>
  <dd id="productEclass">
    <bifrost-classification-popup
      [classificationCode]="product?.eclass"
      (mouseover)="getClasificationTree(eclass ,product?.eclass)"
      [classificationTree]= "classificationTree$ | async">
    </bifrost-classification-popup>
  </dd>

Function in parent component doing the api call

    getClasificationTree(
    classificationType: ClassificationType,
    classificationCode: string
  ) {
    this.classificationTree$ =
      this.classificationService.getClasificationTree(
        classificationType,
        classificationCode
      );
  }

Child Component

{{ classificationCode }}
<svg-icon src="../../../../../assets/images/svg/info.svg"
          svgClass="svg-light mp-8" [ngbPopover]="popContent"
          [closeDelay]="400" popoverClass="popover-black"
          triggers="mouseenter:mouseleave"
          (mouseover)="getClassifications()">
</svg-icon>
<ng-template #popContent>
  <div class="text-white" *ngFor="let classification of classifications">
    <dd>{{classification.code}} {{classification.description[locale]}}</dd>
  </div>
</ng-template>

Now whenever we do a hover on the component two http requests are made . Can someone suggest how can this be prevented ?

Edit :: I tried an extra value like this

<dd id="productUnspsc">
    <bifrost-classification-popup
      [classificationCode]="product?.unspsc"
      (mouseover)="getClasificationTree(unspsc ,product?.unspsc)"
      [classificationTree]= "classificationTree$ | async">
    </bifrost-classification-popup>
  </dd>
  <dt [translate]="'products.detail.eclass'"></dt>
  <dd id="productEclass">
    <bifrost-classification-popup
      [classificationCode]="product?.eclass"
      (mouseover)="getClasificationTree(eclass ,product?.eclass)"
      [classificationTree]= "classificationTree$ | async">
    </bifrost-classification-popup>
  </dd>
  <dd id="productUnspsc">
    <bifrost-classification-popup 
      [classificationCode]="product?.unspsc"
      (mouseover)="getClasificationTree(unspsc ,product?.unspsc)"
       [classificationTree]="classificationTree$ | async">
    </bifrost-classification-popup>
  </dd>

Now there are 3 api calls , actually the number of api calls equals the number of async pipe used on the observable