Tooltip fade-in với CSS Animation

Tooltip fade-in mượt mà (Opacity + Transition)

Thay vì `visibility` bật/tắt đột ngột, dùng `opacity` + `transition` để tạo hiệu ứng **fade-in/fade-out** mượt mà. Kết hợp `visibility` để tooltip không chặn click khi ẩn.

Ví dụ hoàn chỉnh (Tooltip bên trái + fade)

<!DOCTYPE html>
<html>
<head>
  <style>
    .mytooltip .mytext {
      visibility: hidden;
      opacity: 0;                    /* Quan trọng cho fade */
      width: 140px;
      background-color: blue;
      color: #fff;
      z-index: 1;
      top: -5px;
      right: 110%;                   /* Bên trái cha */
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      transition: opacity 0.3s, visibility 0.3s; /* Fade mượt */
    }
    .mytooltip {
      position: relative;
      display: inline-block;
      margin-left: 150px;
    }
    /* Mũi tên trỏ phải */
    .mytooltip .mytext::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 100%;
      margin-top: -5px;
      border-width: 6px;
      border-style: solid;
      border-color: transparent transparent transparent blue;
    }
    .mytooltip:hover .mytext {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="mytooltip">
    Keep mouse cursor over me
    <span class="mytext"> My Tooltip text</span>
  </div>
</body>
</html>

Giải thích kỹ thuật Fade

Tại sao cần cả opacity VÀ visibility?

• Chỉ `opacity: 0`: Tooltip vẫn chiếm không gian, vẫn nhận click/hover (vô hình nhưng còn đó).
• Chỉ `visibility: hidden`: Không thể transition (chuyển đổi đột ngột).
• **Kết hợp**: Mượt mà khi hiện, thực sự biến mất khi ẩn.

Nâng cao: Animation keyframes thay transition

.mytooltip .mytext {
  /* ... */
  animation: fadeOut 0.2s forwards;
}
.mytooltip:hover .mytext {
  animation: fadeIn 0.3s forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-10px); }
}

Lưu ý

Tooltip fade-in cần `z-index` đủ cao. Trên mobile, hover không hoạt động - cần JS toggle class hoặc `ontouchstart=""` hack.