Angular中如何在鼠标悬停步进器时在其上方显示卡片/容器/div？

核心逻辑非常明确：绑定步进节点的悬停状态，控制对应工具卡片的显隐，同时保证卡片层级高于步进器、定位对齐当前悬停节点，以下是不同场景下的落地方法：

方案1：纯CSS实现（无框架依赖，最简单） #

适合静态布局、卡片内容固定的场景，不需要写JS逻辑：

• 结构上把每个步进节点和它对应的工具卡片放到同一个父容器内，父容器设置position: relative作为定位锚点
• 工具卡片默认设置position: absolute、z-index: 999（保证在最上层）、display: none，通过bottom: 140%+left: 50%+transform: translateX(-50%)让卡片默认在节点上方居中
• 用CSS:hover伪类触发显隐：父容器悬停时，内部卡片设置为display: block即可，这种写法天然支持鼠标移动到卡片上操作时不消失，不会出现闪烁问题

参考代码：

.step-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
}
.step-node {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e5e7eb;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tool-card {
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 999;
  display: none;
}
/* 悬停时显示卡片 */
.step-item:hover .tool-card {
  display: block;
}

<div class="step-item">
  <div class="step-node">1</div>
  <div class="tool-card">
    <strong>步骤1：基础信息填写</strong>
    <p style="margin:8px 0 0;font-size:14px;color:#666">请完善个人实名信息，带*标记为必填项</p>
  </div>
</div>

方案2：JS动态定位（适配复杂动态布局） #

如果步进器支持横向滚动、页面布局会动态变化、卡片内容是接口动态返回的，纯CSS定位容易出现偏移，用JS动态计算位置更可靠：

• 监听每个步进节点的mouseenter事件，触发时调用getBoundingClientRect()获取当前节点的视口位置信息
• 把工具卡片挂载到<body>节点下（避免被父级的overflow: hidden裁切），根据节点的top、left值计算卡片的位置，设置卡片为显示状态
• 监听节点和卡片的mouseleave事件，加200ms左右的延迟再隐藏卡片，给用户留出移动鼠标到卡片上操作的缓冲时间，如果检测到鼠标移入卡片就清除隐藏定时器
• 卡片的z-index设置为1000以上，避免被页面其他弹窗、固定定位元素遮挡

方案3：复用UI库组件（开发成本最低） #

如果项目已经在用Element Plus、Ant Design、MUI这类主流UI组件库，直接用组件库内置的Popover/气泡卡片组件包裹每个步进节点即可：

• 把工具卡片的内容放到Popover的内容插槽里
• 配置触发方式为hover、弹出位置为节点上方
• 组件已经内置了边界检测、自动调整位置、层级控制、显隐动画等逻辑，不需要自己处理边缘情况，几行代码就能实现效果

常见踩坑提示 #

• 不要把工具卡片放在设置了overflow: hidden/auto的容器内部，否则会出现卡片被裁切显示不全的问题
• 如果卡片需要支持点击、输入等交互，不要只给步进节点绑定悬停事件，要把节点和卡片纳入同一个悬停判定范围，避免鼠标移到卡片上时卡片直接消失
• 多节点场景下注意做互斥处理，每次悬停新节点时先把其他已经显示的卡片隐藏，避免多个卡片同时出现

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