如何通过css制作悬浮提示框-css教程-PHP中文网

如何通过css制作悬浮提示框

P粉602998670

发布： 2025-10-04 11:46:01

原创

238人浏览过

使用CSS可实现无需JavaScript的悬浮提示框。通过相对定位容器、绝对定位提示文本，并利用:hover触发opacity和visibility的显示切换，配合transition实现淡入动画，再用伪元素添加箭头指向，即可完成简洁高效的Tooltip效果。

如何通过css制作悬浮提示框

悬浮提示框（Tooltip）是一种常见的交互效果，通常在用户将鼠标悬停在某个元素上时显示额外信息。使用 CSS 可以轻松实现这种效果，无需 JavaScript。下面介绍一种简洁实用的实现方法。

基本 HTML 结构

给需要提示的元素添加一个容器，内部包含触发元素和提示内容。例如：

<div class="tooltip">
  悬停我
  <span class="tooltiptext">这是一个提示文本</span>
</div>

登录后复制

核心 CSS 样式

通过定位和隐藏/显示控制实现悬浮效果。

1. 容器设置相对定位

立即学习“前端免费学习笔记（深入）”；

让提示内容相对于这个容器定位。

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

登录后复制

2. 隐藏提示文本，默认不显示

使用 opacity 和 visibility 控制视觉状态，transition 添加淡入动画。

.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* 显示在元素上方 */
  left: 50%;
  margin-left: -60px; /* 宽度一半，居中 */
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  font-size: 14px;
}

登录后复制

3. 鼠标悬停时显示提示

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

利用 :hover 触发显示效果。

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

登录后复制

可选增强效果

让提示框更美观或适应不同位置。

添加小三角（箭头）

使用伪元素创建指向下方的小箭头：

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

登录后复制

调整显示方向

修改 bottom、top、left 或 right 值可改变提示位置。例如显示在下方：

.tooltiptext {
  top: 125%;
  bottom: auto;
}
.tooltiptext::after {
  top: -10px;
  border-color: transparent transparent #333 transparent;
  border-width: 5px;
}

登录后复制

基本上就这些。纯 CSS 实现的提示框轻量、高效，适合大多数场景。关键是用好 position、visibility 和 :hover 的组合，再加点动画和样式提升体验。

以上就是如何通过css制作悬浮提示框的详细内容，更多请关注php中文网其它相关文章！