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

Tooltip bên trái có mũi tên trỏ phải

Khi tooltip hiển thị **bên trái** phần tử cha, mũi tên cần trỏ **về bên phải** (chạm vào cha). Dùng `left: 100%` trên pseudo-element `::after` của tooltip.

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: -5px;
      right: 110%;            /* Bên trái cha (100% + gap) */
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
    }
    .mytooltip {
      position: relative;
      display: inline-block;
      margin-left: 150px;     /* Khoảng cách lề trái trang */
    }
    /* Mũi tên trỏ PHẢI (→) */
    .mytooltip .mytext::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 100%;             /* Đính vào cạnh trái tooltip */
      margin-top: -5px;       /* Căn giữa dọc */
      border-width: 6px;
      border-style: solid;
      /* Màu: trong suốt - trong suốt - trong suốt - blue */
      border-color: transparent transparent transparent blue;
    }
    .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 Border Triangle cho mũi tên phải

.arrow-right {
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left-color: blue;   /* Màu cạnh TRÁI = mũi tên trỏ PHẢI */
}

Bảng nhớ nhanh 4 hướng mũi tên

Cải tiến: Dùng transform thay margin

.mytooltip .mytext::after {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);  /* Căn giữa chính xác */
  border: 6px solid transparent;
  border-left-color: blue;
}

Tooltip hoàn chỉnh 4 hướng (SCSS mixin pattern)

@mixin tooltip($direction, $color: #333) {
  @if $direction == top {
    bottom: 100%; left: 50%; transform: translateX(-50%);
    &::after { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: $color; }
  }
  @else if $direction == bottom {
    top: 100%; left: 50%; transform: translateX(-50%);
    &::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: $color; }
  }
  @else if $direction == left {
    top: 50%; right: 100%; transform: translateY(-50%);
    &::after { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: $color; }
  }
  @else if $direction == right {
    top: 50%; left: 100%; transform: translateY(-50%);
    &::after { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: $color; }
  }
}