要在 CSS 中实现气泡提示和悬浮窗口，可以使用伪元素和绝对定位。具体步骤如下：
position: relative 属性，使其成为定位父元素。::after 伪元素。::after 伪元素添加 content 属性，设置提示文本。::after 伪元素添加样式：position: absolute; top: 100%; left: 50%; transform: translateX(-50%);，使其位于父元素下方居中显示。::after 伪元素添加样式：padding: 4px 8px; background-color: #333; color: #fff; font-size: 12px; border-radius: 4px;，设置提示框样式。示例代码：
.tooltip {
position: relative;
}
.tooltip::after {
content: "这是提示文本";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding: 4px 8px;
background-color: #333;
color: #fff;
font-size: 12px;
border-radius: 4px;
}data-popup 属性，属性值为要显示的弹窗的选择器，例如 data-popup="#popup"。<div id="popup" style="display: none;">这是弹窗内容</div>。:hover 伪类，使其在悬浮时触发弹窗显示。:hover 伪类中，通过 attr() 函数获取 data-popup 属性的值，并使用 display: block 将对应的弹窗元素显示出来。position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.3); padding: 8px;。示例代码：
<div class="popup-trigger" data-popup="#popup">这是触发弹窗的元素</div>
<div id="popup" style="display: none;">
这是弹窗内容
</div>.popup-trigger:hover::before {
content: attr(data-popup);
position: absolute;
top: 100%;
left: 0;
display: block;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
padding: 8px;
}