How to show popup on mouse hover of marker in ngx-mapbox-gl

Question

I am currently showing markers and popups on click of markers. We have a requirement now to show popups on hover.

my template is like below :

<mgl-map #map1 
    [style]="'mapbox://styles/mapbox/streets-v11'" 
    [zoom]="[4]"
    [maxZoom]="maxZoom"
    [center]="[-95.7129, 37.0902]"
    [fitBounds]="bounds"
    [fitBoundsOptions]="boundsOptions">
    <mgl-control mglNavigation [showCompass]="false"></mgl-control>
    <ngContainer *ngFor="let deal of unlockedDeals">
        <mgl-marker #myMarker [lngLat]="lngLat[deal.deal_id]">
            <div class="marker"></div>
            <span><b>{{ deal.deal_name }}</b></span>
        </mgl-marker>
        <mgl-popup [marker]="myMarker" class="" [closeButton]="true" [closeOnClick]="false"
            [anchor]="'top'">
            <div class="marker-popup-details">
             custom popup
            </div>
        </mgl-popup>
    </ngContainer>
</mgl-map>

no code relevant to map in component.