工具提示

本课属于 Coddy HTML 学习旅程的“前端实践”单元。第 23 课，共 35 课。

工具提示是小型的信息弹出元素，当用户将鼠标悬停在界面元素上或使其获得焦点时，它们会出现。它们可以提供更多背景信息，同时避免让主界面显得杂乱。

我们来用 HTML 和 CSS 创建一个基本的工具提示：

首先，创建 HTML 结构：

<div class="tooltip-container">
  <button>Hover over me</button>
  <span class="tooltip">This is a tooltip!</span>
</div>

接下来，添加 CSS 来定位提示框并控制其显示和隐藏：

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

.tooltip {
  visibility: hidden; 
  /* 设置提示框的位置 */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* 显示前添加短暂延迟 */
  opacity: 0;
  transition: opacity 0.3s;
}

/* 鼠标悬停在容器上时显示提示框 */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

将鼠标悬停在按钮上时，按钮上方会显示提示框。

挑战

简单

给你一个带有工具提示的 HTML 按钮，当用户将鼠标悬停在 "Help" 按钮上时，工具提示会显示。你的任务：

默认隐藏工具提示。
添加背景颜色和文字颜色，让它更醒目。
将工具提示中的文字居中。
添加一些内边距，让工具提示看起来更美观。
使用 border-radius 将角变圆。

亲手试试

<!DOCTYPE html>
<html>
<head>
  <title>Tooltips</title>
  <style>
    .tooltip-container {
      position: relative;
      display: inline-block;
      margin: 50px;
    }
    
    button {
      padding: 8px 16px;
      cursor: pointer;
    }
    
    .tooltip {
      
      /* Animation properties */
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    /* Show the tooltip when hovering over the container */
    .tooltip-container:hover .tooltip {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="tooltip-container">
    <button>Help</button>
    <span class="tooltip">Click for assistance</span>
  </div>
</body>
</html>

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

前端实践中的所有课

自己练习： Web 在线编辑器