Tooltip Pure CSS

Đây là một UI component tooltip tinh gọn, được xây dựng hoàn toàn bằng HTML và CSS thuần mà không cần viện đến JavaScript. Tooltip sẽ có hiệu ứng fade-in nổi lên một cách mượt mà ngay phía trên phần tử đích (target) mỗi khi người dùng hover chuột vào.

Xem trước (Preview)

Mã nguồn (Source Code)

Hãy copy đoạn mã bên dưới và nhúng trực tiếp vào dự án của bạn.

<!-- index.html -->
<div class="tooltip-wrapper">
  <button class="tooltip-trigger">Hãy hover vào đây</button>
  <div class="tooltip-content">
    Đây là tooltip pure CSS!
  </div>
</div>

/* styles.css */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-trigger {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background-color: #3b82f6;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
}

.tooltip-trigger:hover {
  background-color: #2563eb;
}

.tooltip-content {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  background-color: #1f2937;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Hình tam giác (mũi tên) hướng xuống dưới */
.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}

/* Hoạt động khi hover */
.tooltip-wrapper:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

Giải thích chi tiết

Thiết lập position: Bằng cách khai báo position: relative cho thẻ bao ngoài (.tooltip-wrapper), nội dung của tooltip (.tooltip-content) có thể được định vị tuyệt đối (position: absolute) dựa trên vị trí của thẻ cha đó.
Sử dụng visibility thay vì display: Vì thuộc tính display: none không cho phép CSS animation (transition) hoạt động, chúng ta dùng thủ thuật kết hợp visibility: hidden và opacity: 0 để ẩn tooltip khi ở trạng thái mặc định.
Hiệu ứng trồi lên (Float up): Tooltip ban đầu được đẩy xuống dưới một chút thông qua transform: translateY(10px). Khi hover, việc trả nó về translateY(0) sẽ tạo ra một hiệu ứng nổi lên nhẹ nhàng, thu hút sự chú ý.
Vẽ mũi tên (CSS Triangle): Phần “đuôi” hình tam giác nhỏ nhắn chỉ xuống của tooltip được tạo ra hoàn toàn bằng thủ thuật thao tác với thuộc tính border của pseudo-element .tooltip-content::after.