Set top and left to ViewChild element? Angular 4

Question

I need to set offesetTop and offsetLeft to my viewchild element, to position it on hover of another element. It is a tooltip, so this is what I tried:

<div (mouseover)="showPopup($event, price)"></div>
<div #tooltip>Some text</div>

This is my div,and inside TS I have:

@ViewChild('tooltip') tooltip: ElementRef;

showPopup(event, price) {

    price.show = true;
    this.tooltip.nativeElement.offsetTop = event.target.offsetTop;
    this.tooltip.nativeElement.offsetLeft = event.target.offsetLeft;
  }

But I get the following error:

Cannot assign to read only property 'offsetTop' of object '[object HTMLDivElement]' . Any advice?

Answer 1

offsetTop and offsetLeft are readonly in the browser, that is not in any way related to Angular.

Perhaps this will work for you:

<div [style.top.px]="top" [style.left.px]="left">Some text</div>

class MyComponent {
  top: number;
  left: number;
}