'How to set a rectangle on the top center of another rectangle with pure JS

I would like to get the result like this expected. The actual problem is a div will be displayed on the top center of an icon ( behaviour like a tooltip). I have tried the following code:

const iconPosition= this.el.nativeElement.getBoundingClientRect();

const divPosition= this.div.getBoundingClientRect();

let top;
let left;

if (this.placement === 'top') {
  top = iconPosition.top - divPosition.height;
  left = iconPosition.left + (iconPosition.width - divPosition.width) / 2;
}

The top works fine but I have an issue with the left. It leads me to this result: current

Could someone help? I got stuck for two days now. Any support is greatly appreciated! Thank you all!

javascripthtmlcanvasrectangles


Solution 1:[1]

Just as an input: Can it be, that the part: (iconPosition.width - divPosition.width) / 2 is negative? So you are going to move thed upper div to the left instead to the right Math.abs(); might help, but without code......

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 grisuu

Related Questions