CSS Tooltip - Tạo Hộp Thông Tin Hiện Khi Hover

Tooltip hiển thị thông tin bổ sung khi người dùng di chuột qua một phần tử. HTML không có thẻ tooltip sẵn, nên ta kết hợp HTML + CSS để tự tạo.

Xây Dựng Tooltip Cơ Bản

Ví dụ: Trang công thức nấu ăn. Khi hover vào "Prepare the baking tray", hiện tooltip nhắc "Line tray with greaseproof paper."

HTML Structure

<div style="text-align:center;">
  <p>Instructions for baking:</p>
  <div class="tooltip">
    Prepare the baking tray.
    <span class="contents">Line tray with greaseproof paper.</span>
  </div>
</div>

<div class="tooltip"> chứa nhãn hiển thị. <span class="contents"> chứa nội dung tooltip (mặc định ẩn).

CSS Styling

.tooltip {
  display: inline-block;
  position: relative;
  margin: 50px;
}
.tooltip .contents {
  visibility: hidden;
  width: 120px;
  background-color: lightblue;
  color: white;
  text-align: center;
  padding: 10px 0;
  border-radius: 5px;
  position: absolute;
  z-index: 1;
}
.tooltip:hover .contents {
  visibility: visible;
}

Giải Thích Code

• .tooltip: inline-block để chứa tooltip, relative làm gốc định vị cho con absolute.
• .tooltip .contents: Mặc định visibility: hidden. Style giao diện: nền xanh nhạt, chữ trắng, bo góc, padding. position: absolute định vị tương đối parent.
• .tooltip:hover .contents: Khi hover parent, con hiện ra (visibility: visible).

Định Vị Tooltip (Positioning)

Mặc định tooltip hiện bên phải. Bạn có thể tùy chỉnh:

Bên Phải (Right)

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

Bên Trái (Left)

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

Trên (Top)

.tooltip .contents { bottom: 100%; left: 50%; margin-left: -60px; }

margin-left: -60px (nửa width 120px) để căn giữa tooltip trên nhãn.

Dưới (Bottom)

.tooltip .contents { top: 100%; left: 50%; margin-left: -60px; }

Hiệu Ứng Fade-in (Mờ Đi Mờ Lại)

Dùng opacity + transition tạo chuyển động mượt mà:

.tooltip .contents {
  opacity: 0;
  transition: opacity 2s;
}
.tooltip:hover .contents {
  opacity: 1;
}

Tooltip từ trong suốt (0) dần hiện rõ (1) trong 2 giây.

Kết Luận

Tooltip hiển thị thông tin phụ khi hover. Bạn đã học: cấu trúc HTML/CSS cơ bản, định vị 4 hướng (trái/phải/trên/dưới), hiệu ứng fade-in. Hãy tự thiết kế tooltip chuyên nghiệp!