CSS：如何保持自定义popover和用于打开它的控件之间的距离，即使我更改了容器的大小

我正在尝试创建一种popover，它可以根据移动设备或桌面上显示的内容改变其位置

我几乎做到了，但我不能让它重复使用，因为如果我改变容器的大小，popover将不会显示在所需的位置

以下是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>

还有我用来打开popover的小角度代码：

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） 对于桌面版本，它应该显示在按钮（日历）下方，并在右侧有一点间隙

正如我所提到的，它可以工作，但是如果我改变

输入组的大小，popor就不再正确定位

您只需将工具提示的
left
CSS属性替换为
right
，这样它将与其
输入组一起移动
容器边界：

.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;
  ...

感谢ROOT，请问您是如何确定-15px是正确的，无论组的宽度如何？因为您需要工具提示与右侧对齐，所以您应该使用
right
，
left
CSS属性将要求您进行计算，以测量使用
EM
单位设置的父级。您可以使用
calc（）
CSS函数获取父级的属性，但是拥有正确的属性更干净。好的，但是您是如何获得该数字（-15px）的？Devtools，trail&error？@eddy，我使用了devtool，trail&error，正如你提到的，我主要是在不改变
输入组
宽度的情况下查找你想要的内容。在stackblitz中，它起了作用，但现在我进入了我的页面，它没有起作用，因为输入组的尺寸发生了变化。有没有办法设置位置，但要考虑容器的大小？
.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;
  ...