Tạo tooltip với CSS - Hướng dẫn hoàn chỉnh

Tooltip là gì?

Tooltip (mẹo công cụ) là hộp văn bản nhỏ hiện ra khi người dùng di chuột qua một phần tử. Nó cung cấp thông tin bổ sung mà không làm rối giao diện.

Cấu trúc HTML cơ bản

<div class="tooltip-container">
  Hover vào tôi
  <span class="tooltip-text">Nội dung tooltip</span>
</div>

CSS cốt lõi (Pattern chuẩn)

.tooltip-container {
  position: relative;        /* 1. Làm gốc tọa độ */
  display: inline-block;     /* 2. Chỉ bao vừa nội dung */
  cursor: help;              /* 3. Con trỏ chỉ rõ có tooltip */
}

.tooltip-text {
  visibility: hidden;        /* 4. Ẩn mặc định */
  opacity: 0;                /* 5. Cho phép fade transition */
  position: absolute;        /* 6. Tách khỏi luồng văn bản */
  z-index: 10;               /* 7. Hiển thị trên hết */
  /* Vị trí - ví dụ bottom center: */
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  /* Giao diện */
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;       /* 8. Không xuống dòng */
  transition: opacity 0.2s, visibility 0.2s;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Mũi tên */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;                 /* Đính dưới tooltip */
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #333;    /* Màu khớp background tooltip */
}

4 biến thể vị trí phổ biến

bottom: 125%;
left: 50%;
transform: translateX(-50%);

::after { top: 100%; border-top-color: #333; }

top: 125%;
left: 50%;
transform: translateX(-50%);

::after { bottom: 100%; border-bottom-color: #333; }

top: 50%; left: 125%;
transform: translateY(-50%);

::after { right: 100%; border-right-color: #333; }

top: 50%; right: 125%;
transform: translateY(-50%);

::after { left: 100%; border-left-color: #333; }

Ví dụ hoàn chỉnh (Tooltip trên)

<!DOCTYPE html>
<html>
<head>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: help;
    }
    .tooltip .tooltiptext {
      visibility: hidden;
      opacity: 0;
      width: 200px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      transition: opacity 0.3s;
    }
    .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -6px;
      border-width: 6px;
      border-style: solid;
      border-color: #333 transparent transparent transparent;
    }
    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="tooltip">Hover me
    <span class="tooltiptext">Tooltip hiện lên trên!</span>
  </div>
</body>
</html>

Lưu ý nâng cao

• Touch device: Hover không hoạt động trên mobile. Cần JS toggle class hoặc ontouchstart.
• Accessibility: Thêm aria-describedby hoặc dùng title attribute cho screen reader.
• Viewport overflow: Tooltip có thể bị cắt ở mép màn hình. Cần JS tính toán vị trí hoặc CSS anchor-positioning (Chrome 125+).