CSS: Как сохранить расстояние между настраиваемым всплывающим окном и элементом управления, который используется для его открытия, даже если я изменю размер контейнера

Question

Я пытаюсь создать своего рода всплывающее окно, которое меняет свое положение в зависимости от того, отображается ли оно на мобильном устройстве или на рабочем столе.

Мне почти удалось это сделать, но я не могу сделать это заново -используется, потому что если я изменю размер контейнера, всплывающее окно не будет отображаться в желаемом месте.

Вот html:

<div class="button-cont">
    <div class="input-group mb-3 button-container">
        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        <div class="input-group-append button-calendar" (click)="show()">
            <span class="input-group-text">.00</span>
        </div>
        <div class="custom-tooltip" #tooltip>
            Hello
        </div>
    </div>
</div>

CSS:

.button-cont {
  height: 100%;
  width: 100%;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



.button-container {
  position: relative;
  padding: 1rem 1rem;
  height: 3rem;
  width: 30rem;
}

.button-calendar {
  cursor: pointer;
}

.custom-tooltip {
  height: 5rem;
  background-color: white;
  width: 5rem;
  position: absolute;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  left: 26rem;
  bottom: -93px;
  opacity: 0;

  @media(max-width: 600px) { 
     margin-left: auto; 
     margin-right: auto; 
     bottom: -86px;
     left: 50%;
     transform: translateX(-50%)
  } 

}


.show-tooltip {
  opacity: 1
}

И небольшой Angular код, который я использую для открытия всплывающего окна:

import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";

@Component({
  selector: "app-ngx-bootstrap",
  templateUrl: "./ngx-bootstrap.component.html",
  styleUrls: ["./ngx-bootstrap.component.scss"]
})
export class NgxBootstrapComponent implements OnInit {
  @ViewChild("tooltip") tooltip: ElementRef;
  isOpen = false;
  constructor() {}

  ngOnInit() {}

  show() {
    if (!this.isOpen) {
      this.tooltip.nativeElement.classList.add("show-tooltip");
    } else {
      this.tooltip.nativeElement.classList.remove("show-tooltip");
    }
    this.isOpen = !this.isOpen;
  }
}

Я знаю, что компонент не похож на желаемый результат, , но именно позиция Интересно на данный момент , вот как должно быть позиционировать

Это то, что мне нужно :

1) Для мобильных устройств (для этого уже есть медиа-запрос) он должен отображаться под группой ввода и центрироваться по горизонтали

2) Для настольной версии он должен отображаться под кнопкой (календарь) и вправо с небольшим промежутком.

Как я уже говорил, это вроде работает, но если я При изменении размера input-group всплывающее окно больше не позиционируется правильно.

Вот демонстрация в stackblitz

Answer 1

Вы можете просто заменить атрибут left CSS для всплывающей подсказки на right, так он будет перемещен вместе с границей контейнера input-group:

.custom-tooltip {
  height: 5rem;
  background-color: white;
  width: 5rem;
  position: absolute;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  right: -15px;
  bottom: -93px;
  opacity: 0;
  ...