在 CSS 中，我们可以使用 hover 伪类来实现鼠标移上去弹出框的效果。

.box {
position: relative;
}
.popover {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
display: none;
}
.box:hover .popover {
display: block;
}

我们首先给外层元素（例如一个按钮或者图片）添加 position: relative，为弹出框设置 position: absolute，并且让它相对于外层元素的底部位置展示（通过 top: 100% 实现）。

接下来，我们让弹出框相对于自身垂直居中，并且让它始终处于外层元素的中心位置（通过 left: 50% 和 transform: translateX(-50%) 实现）。

最后，当鼠标移上去外层元素时，弹出框就会显示出来了（通过 .box:hover .popover 来控制）。

完整的 HTML 和 CSS 代码如下：

<div class="box">
<button>Hover Me</button>
<div class="popover">
<p>This is a popover</p>
</div>
</div>
.box {
position: relative;
}
.popover {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
display: none;
padding: 10px;
background-color: #f1f1f1;
}
.box:hover .popover {
display: block;
}

上述代码中，我们还为弹出框添加了一些额外的样式，例如 padding 和背景颜色，以便使它看起来更加美观。

当我们将鼠标移上去按钮时，弹出框就会在下面显示出来，非常方便。