Tạo tooltip hiện khi di chuột qua với CSS (visibility)

Tooltip cơ bản với visibility + hover

Cách đơn giản nhất tạo tooltip: dùng visibility: hidden mặc định, và visibility: visible khi hover vào phần tử cha.

Ví dụ tối giản

<!DOCTYPE html>
<html>
<head>
  <style>
    #mytooltip #mytext {
      visibility: hidden;
      width: 100px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 3px;
      padding: 10px 0;
      position: absolute;
      z-index: 1;
      bottom: 120%;      /* Hiển thị trên cùng */
      left: 50%;
      transform: translateX(-50%);
    }
    #mytooltip:hover #mytext {
      visibility: visible;
    }
  </style>
</head>
<body>
  <div id="mytooltip">
    Hover the mouse over me
    <p id="mytext">My Tooltip text</p>
  </div>
</body>
</html>

Phân tích code

• #mytooltip: Container, cần position: relative (mặc định static không làm mốc cho con absolute). *Lưu ý: ví dụ gốc thiếu dòng này, tooltip có thể lệch vị trí.*
• #mytext: Tooltip nội dung, position: absolute lấy vị trí theo cha gần nhất có position ≠ static.
• visibility: hidden: Ẩn nhưng vẫn chiếm không gian layout (khác display: none).
• :hover: Pseudo-class kích hoạt khi con trỏ chuột vào vùng cha.

Cải tiến: Thêm transition mượt mà

visibility không thể transition. Dùng opacity kết hợp:

#mytooltip #mytext {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}
#mytooltip:hover #mytext {
  visibility: visible;
  opacity: 1;
}

So sánh visibility vs display vs opacity