Динамически позиционировать элемент относительно другого элемента с помощью Angular

Question

Если у меня есть строка сетки из нескольких элементов, как это. Каждый элемент представляет собой col-lg-3 с функцией mouseenter. Когда вызывается указатель мыши, мы отображаем div с классом «popover», но, учитывая положение div в html, он всегда отображается в конце строки (для l oop). Я хочу отобразить div, у которого всплывающее окно класса находится рядом с div. Чтобы сделать это, мне нужно определить положение элемента наведения и настроить координаты x, y, высоту, ширину и другие css свойства div с помощью класса «popover». Любые мысли о том, как это сделать с Renderer2?

<div class="row">
  <div class="card col-lg-3" *ngFor="let x of apples"
    (mouseenter)="displayPopover()">
    <div card-body">
      stuff here
    </div>
  </div>
  <div class="popover" *ngIf="showPopover">
    <p>position me</p>
  </div>
</div>

В моем файле машинописи у меня есть такая функция:

displayPopover() {
     this.showPopover = true;
     // dynamically position the popover next to the div that was hovered over
}

Прямо сейчас,