Chú giải

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 23 trên 35.

Chú giải là những cửa sổ bật lên nhỏ cung cấp thông tin, xuất hiện khi người dùng di chuột qua hoặc đặt tiêu điểm vào một phần tử giao diện. Chúng cung cấp thêm ngữ cảnh mà không làm giao diện chính trở nên rối mắt.

Hãy tạo một chú giải cơ bản bằng HTML và CSS:

Trước tiên, hãy tạo cấu trúc HTML:

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

Tiếp theo, thêm CSS để định vị và ẩn/hiện chú giải:

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

.tooltip {
  visibility: hidden; 
  /* Định vị tooltip */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Thêm độ trễ ngắn trước khi hiển thị */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Hiển thị tooltip khi di chuột lên vùng chứa */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Với đoạn code này, khi bạn di chuột lên nút, chú giải sẽ xuất hiện phía trên nút.

Thử thách

Dễ

Bạn được cung cấp một nút HTML có chú giải công cụ xuất hiện khi người dùng di chuột qua nút "Help". Nhiệm vụ của bạn:

Ẩn chú giải công cụ theo mặc định.
Thêm màu nền và màu chữ để chú giải nổi bật.
Căn giữa văn bản bên trong chú giải công cụ.
Thêm chút khoảng đệm để chú giải công cụ trông đẹp hơn.
Bo tròn các góc bằng border-radius.

Tự làm thử

<!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>