Tạo tooltip bên phải (right tooltip) với CSS

Tooltip hiển thị bên phải phần tử

Để tạo tooltip xuất hiện **bên phải** khi hover, kỹ thuật chính là:

1. Phần tử cha: position: relative
2. Tooltip (con): position: absolute, left: 100% (hoặc >100% cho khoảng cách)
3. Ẩn mặc định: visibility: hidden / opacity: 0
4. Hiện khi hover: .parent:hover .tooltip { visibility: visible; }

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .mytooltip .mytext {
      visibility: hidden;
      width: 140px;
      background-color: blue;
      color: #fff;
      z-index: 1;
      top: -6px;
      left: 100%;           /* Quan trọng: bên phải 100% width của cha */
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
    }
    .mytooltip {
      position: relative;   /* Quan trọng: làm gốc tọa độ cho con absolute */
      display: inline-block;
    }
    .mytooltip:hover .mytext {
      visibility: visible;
    }
  </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 các thuộc tính quan trọng

Cải tiến: Thêm mũi tên (arrow)

Dùng pseudo-element ::after trên tooltip:

.mytooltip .mytext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;           /* Mũi tên chạm vào cha */
  margin-top: -5px;      /* Căn giữa mũi tên */
  border-width: 5px;
  border-style: solid;
  border-color: transparent blue transparent transparent; /* Mũi tên trỏ trái */
}