CSS 教程

CSS 教程 CSS 简介 CSS 语法 CSS 选择器 CSS 如何使用 CSS 注释 CSS 颜色 CSS 背景 CSS 边框 CSS 外边距 CSS 内边距 CSS 高度/宽度 CSS Box 模型 CSS 轮廓 CSS 文本 CSS 字体 CSS 图标 CSS 链接 CSS 列表 CSS 表格 CSS Display CSS Max-width CSS 定位 CSS 溢出 CSS 浮动 CSS Inline-block CSS 对齐 CSS 组合器 CSS 伪类 CSS 伪元素 CSS 不透明度 CSS 导航栏 CSS 下拉菜单 CSS 图片库 CSS 图像拼合技术 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网站布局 CSS 单位 CSS 特异性

CSS3 高级教程

CSS3 高级教程 CSS3 简介 CSS3 圆角 CSS3 边框图像 CSS3 多重背景 CSS3 颜色 CSS3 渐变 CSS3 阴影 CSS3 文本效果 CSS3 网络字体 CSS3 2D 转换 CSS3 3D 转换 CSS3 过渡 CSS3 动画 CSS3 提示框 CSS3 样式图像 CSS3 object-fit CSS3 按钮 CSS3 分页 CSS3 多列 CSS3 用户界面 CSS3 变量 CSS3 盒子大小 CSS3 媒体查询 CSS3 媒体查询实例 CSS3 弹性盒子

CSS 响应式

RWD 简介 RWD 视口 RWD 网格视图 RWD 媒体查询 RWD 图像 RWD 视频 RWD 框架 RWD 模板

CSS 网格视图

Grid 网络简介 Grid 网格容器 Grid 网格项目

CSS 实例

CSS 模板 CSS 实例 CSS 测验 CSS 练习

CSS 参考手册

CSS 参考手册 CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 网络安全字体 CSS 动画相关属性 CSS 单位 CSS PX-EM 单位转换 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 实体 CSS 听觉


CSS 提示框

通过 CSS 创建提示框(Tooltip)。


演示:提示框

当用户将鼠标指针移到元素上时,工具提示通常用于提供关于某内容的额外信息:

Top Tooltip text
Right Tooltip text
Bottom Tooltip text
Left Tooltip text


基础的工具提示

创建一个鼠标移到元素上时显示的工具提示:

实例

<style>
/* 工具提示容器 */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* 如果你想要悬停文本下的点 */
}

/* 工具提示文本 */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* 定位工具提示文本 - 请参见下面的示例! */
  position: absolute;
  z-index: 1;
}

/* 当您将鼠标悬停在工具提示容器上时显示工具提示文本 */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
亲自试一试 »

实例解析

HTML:

使用容器元素(例如 <div>)并向其添加 "tooltip" 类。当用户将鼠标悬停在此 <div> 上时,会显示工具提示文本。

工具提示文本位于 class="tooltiptext" 的嵌入式元素(如 <span>)中。

CSS:

tooltip 类使用 position:relative,用于放置工具提示文本(position:absolute)。注意:有关如何放置工具提示,请参见下面的例子。

tooltiptext 类保存实际的工具提示文本。默认情况下它是隐藏的,并会在鼠标悬停时可见(请参阅下文)。我们还为其添加了一些基本样式:120 像素的宽度、黑色背景、白色文本、文本居中以及 5px 的上下内边距(padding)。

CSS border-radius 属性用于向工具提示文本添加圆角。

当用户将鼠标移到 class="tooltip" 的 <div> 上时,:hover 选择器用于显示工具提示文本。



定位工具提示

在本例中,工具提示位于"可悬停"文本(<div>)的右侧(left:105%)。另外请注意,top:-5px 用于将其放置在其容器元素的中间。我们使用数字 5 是因为工具提示文本的上下内边距均为 5px。如果增加其内边距,还请您同时增加 top 属性的值,以确保它停留在中间。如果要将工具提示放在左侧,也同样适用。

Right Tooltip

.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}

结果:

Hover over me 工具提示文本
亲自试一试 »

左侧工具提示

.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}

结果:

Hover over me 工具提示文本
亲自试一试 »

如果您希望工具提示位于上方或下方,请看下面的例子。请注意,我们使用了负 60 像素的左外边距属性(margin-left)。这是为了把工具提示与可悬停文本进行居中对齐。该值是工具提示宽度的一半(120/2 = 60)。

顶部工具提示

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* 使用宽度的一半 (120/2 = 60),使工具提示居中 */
}

结果:

Hover over me 工具提示文本
亲自试一试 »

底部工具提示

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* 使用宽度的一半 (120/2 = 60),使工具提示居中 */
}

结果:

Hover over me 工具提示文本
亲自试一试 »

工具提示箭头

如需创建在工具提示的指定侧面显示的箭头,请在工具提示后添加"空的"内容,并使用伪元素类 ::aftercontent 属性。箭头本身是使用边框创建的。这会使工具提示看起来像气泡。

本例演示如何在工具提示的底部添加箭头:

底部箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* 在工具提示的底部 */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

结果:

Hover over me Tooltip text
亲自试一试 »

实例解析

将箭头定位在工具提示内:top: 100% 将箭头放置在工具提示的底部。left: 50% 将使箭头居中。

注释: border-width 属性指定箭头的大小。如果您更改此设置,也请将 margin-left 值更改为相同值。这将使箭头居中。

border-color 用于将内容转换为箭头。我们将上边框设置为黑色,其余设置为透明。如果所有面都是黑色,则最终将得到一个黑色的方形框。

本例演示了如何在工具提示的顶部添加箭头。请注意,这次我们设置了下边框的颜色:

顶部箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* 在工具提示的顶部 */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

结果:

Hover over me Tooltip text
亲自试一试 »

本例演示如何在工具提示的左侧添加箭头:

左侧箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* 在工具提示的左侧 */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

结果:

Hover over me Tooltip text
亲自试一试 »

本例演示如何在工具提示的右侧添加箭头:

右侧箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* 在工具提示的右侧 */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

结果:

Hover over me Tooltip text
亲自试一试 »

淡入的工具提示(动画)

如果希望在即将显示的工具提示文本中淡入淡出,可以将 CSS transition 属性与 opacity 属性一同使用,并在指定的秒数(例子中是 1 秒)内从完全不可见变为 100% 可见:

实例

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}
亲自试一试 »