实现自定义Popover底部固定并向上延伸的布局方案求助

要实现Top方向Popover底部固定在触发按钮正上方、内容增多时向上延伸的效果，需调整CSS定位规则和JS计算逻辑，具体修改如下：

1. 移除Popover固定高度 #

原CSS中.popover-overlay设置的固定高度会限制内容扩展，直接删除该属性：

.popover-overlay {
  position: fixed;
  z-index: 100;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  display: none;
  width: 280px;
  /* 移除固定height: 121px */
}

2. 修正Top方向定位逻辑 #

原JS中同时设置top和bottom会引发布局冲突，且未考虑页面滚动和内容更新后的高度变化，修改Top方向的定位代码：

case "top":
  // 获取按钮在视口中的顶部位置（包含滚动偏移）
  const buttonViewportTop = top + window.scrollY;
  // 强制DOM重绘，确保获取内容更新后的Popover高度
  void popover.offsetHeight;
  const newPopoverHeight = parseFloat(getComputedStyle(popover).height);
  // 设置Popover顶部位置，使其底部对齐按钮顶部上方20px处
  popover.style.top = `${buttonViewportTop - newPopoverHeight - 20}px`;
  // 按钮在视口中的左侧位置（包含滚动偏移）
  popover.style.left = `${left + window.scrollX}px`;
  // 清除bottom属性，避免布局冲突
  popover.style.bottom = 'auto';
  break;

完整修改后代码 #

JavaScript #

let popoverBtn = document.querySelectorAll("[data-toggle='popover']");
let popover = document.querySelector(".popover-overlay");
let popoverHeading = document.querySelector(".popover-overlay-heading h4");
let popoverContent = document.querySelector(".popover-overlay-content p");

for (let i = 0; i < popoverBtn.length; i++) {
  if (popoverBtn[i]) {
    popoverBtn[i].addEventListener("click", function(e) {
      let top = e.target.offsetTop;
      let left = e.target.offsetLeft;
      let width = e.target.offsetWidth;
      let height = e.target.offsetHeight;
      let heading = e.target.getAttribute("title");
      let description = e.target.getAttribute("data-content");
      let popoverWidth = parseFloat(getComputedStyle(popover).width);
      let dir = e.target.getAttribute("data-placement");

      popoverHeading.textContent = heading;
      popoverContent.textContent = description;
      popover.classList.add("active");
      // 重置定位属性
      popover.style.top = 'auto';
      popover.style.left = 'auto';
      popover.style.bottom = 'auto';

      switch (dir) {
        case "top":
          const buttonViewportTop = top + window.scrollY;
          void popover.offsetHeight;
          const newPopoverHeight = parseFloat(getComputedStyle(popover).height);
          popover.style.top = `${buttonViewportTop - newPopoverHeight - 20}px`;
          popover.style.left = `${left + window.scrollX}px`;
          break;
        case "bottom":
          popover.style.top = `${top + height + 5 + window.scrollY}px`;
          popover.style.left = `${left + window.scrollX}px`;
          break;
        case "left":
          popover.style.top = `${top + window.scrollY}px`;
          popover.style.left = `${left - popoverWidth - 20 + window.scrollX}px`;
          break;
        case "right":
          popover.style.top = `${top + window.scrollY}px`;
          popover.style.left = `${left + width + 30 + window.scrollX}px`;
          break;
        default:
          popover.style.top = `${top + window.scrollY}px`;
          popover.style.left = `${left + width + 30 + window.scrollX}px`;
          break;
      }
    })
  }
}

CSS #

body {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

h3,
h4,
p {
  margin: 0px;
}

.container {
  width: 100%;
}

.bg-gray {
  background-color: rgba(0, 0, 0, 0.3);
}

.bg-light-gray {
  background-color: rgba(0, 0, 0, 0.1);
}

section {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

section button {
  display: inline-block;
  border: none;
  background-color: #dc3545;
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.popover-overlay {
  position: fixed;
  z-index: 100;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  display: none;
  width: 280px;
}

.popover-overlay.active {
  display: block;
}

.popover-overlay-heading {
  background-color: #f7f7f7;
  border-bottom: 1px solid #d3d3d3;
  padding: 1rem;
}

.popover-overlay-content {
  background-color: #fff;
  padding: 1rem;
}

HTML #

<div class="popover-overlay">
  <div class="popover-overlay-heading">
    <h4></h4>
  </div>
  <div class="popover-overlay-content">
    <p></p>
  </div>
</div>
<div class="container">
  <section class="bg-gray">
    <button data-placement="top" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="It's very engaging. Right? And here's some amazing content. It's very engaging. It's very engaging. Right? And here's some amazing content. It's very engaging.">Popover Top</button>
    <button data-placement="left" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Popover Left</button>
    <button data-placement="right" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Popover Right</button>
    <button data-placement="bottom" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Popover Bottom</button>
  </section>
</div>

关键修改说明 #

• 移除固定高度：让Popover高度随内容自动调整，避免内容被截断。
• 视口定位修正：加入window.scrollX/Y，确保页面滚动时Popover仍能正确对齐按钮。
• 强制DOM重绘：更新内容后触发重绘，获取最新的Popover高度，保证定位精准。
• 清除冲突属性：避免同时设置top和bottom导致的布局异常。

内容的提问来源于stack exchange，提问作者Pranay kumar