Tooltip web component JS - responsive positioning

tooltip-web-component-position.js

handleDropdownPosition() {
  const screenPadding = 16;

  const placeholderRect = this.placeholder.getBoundingClientRect();
  const dropdownRect = this.dropdown.getBoundingClientRect();

  const dropdownRightX = dropdownRect.x + dropdownRect.width;
  const placeholderRightX = placeholderRect.x + placeholderRect.width;

  if (dropdownRect.x < 0) {
    this.dropdown.style.left = '0';
    this.dropdown.style.right = 'auto';
    this.dropdown.style.transform = `translateX(${-placeholderRect.x + screenPadding}px)`;
  } else if (dropdownRightX > window.outerWidth) {
    this.dropdown.style.left = 'auto';
    this.dropdown.style.right = '0';
    this.dropdown.style.transform = `translateX(${(window.outerWidth - placeholderRightX) - screenPadding}px)`;
  }
}