Angular how to make mde popover spawn next to element instead of above or below

Question

I'm working on an Angular project and was wondering if someone knows if it is possible to make a mde-popover spawn next to the hovering element instead of above or below it.

So far I haven't been able to change the spawn position this is what it looks like now.

In my code it looks like this:

               <mat-card class="skill-card" [mdePopoverTriggerFor]="appPopover" mdePopoverTriggerOn="click"
                            #popoverTrigger="mdePopoverTrigger">
                                <mat-card-content>Scrum</mat-card-content>
                            </mat-card>

                    <mde-popover #appPopover="mdePopover" [mdePopoverOverlapTrigger]="false">
                        <mat-card>
                            <mat-card-content>Dummy Tag</mat-card-content>
                            <mat-card-content>Dummy catagory</mat-card-content>
                        </mat-card>
                    </mde-popover>