如何创建：工具提示

如何创建工具提示

第一步 - 添加 HTML：

<div class="tooltip">悬停在上方
  <span class="tooltiptext">Tooltip text</span>
</div>

第二步 - 添加 CSS：

/* 工具提示容器 */
.tooltip {
  位置: 相对;
  显示: 内联块;
  底部边框: 1px 点状 黑色; /* 如果您想要在可悬停文本下添加点状边框 */
}
/* 工具提示文本 */
.tooltip .tooltiptext {
  可见性: 隐藏;
  宽度: 120px;
  背景颜色: #555;
  颜色: #fff;
  文本对齐: 居中;
  内边距: 5px 0;
  边框半径: 6px;
  /* 定位工具提示文本 */
  位置: 绝对;
  z索引: 1;
  底: 125%;
  左: 50%;
  左边距: -60px;
  /* 淡入工具提示 */
  透明度: 0;
  过渡: 透明度 0.3秒;
}
/* 工具提示箭头 */
.tooltip .tooltiptext::after {
  内容: "";
  位置: 绝对;
  顶: 100%;
  左: 50%;
  左边距: -5px;
  边框宽度: 5px;
  边框样式: 实线;
  边框颜色: #555 透明 透明 透明;
}
/* 当您将鼠标悬停在工具提示容器上时显示工具提示文本 */
.tooltip:hover .tooltiptext {
  可见性: 可见;
  透明度: 1;
}

亲自试一试

相关页面

教程：CSS 工具提示

教程：如何创建弹出窗口

教程：如何创建模态