Tạo mũi tên tooltip hướng lên (arrow top) với CSS

Tooltip bên dưới có mũi tên trỏ lên

Khi tooltip hiển thị **dưới** phần tử cha, mũi tên trỏ **lên** (chạm vào cha). Dùng `bottom: 100%` trên tooltip và `border-bottom-color` trên pseudo-element.

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: 150%;              /* Dưới cha (100% + gap) */
      left: 50%;              /* Căn giữa ngang */
      margin-left: -70px;     /* Nửa width (cách cũ) */
      /* Hiện đại: left: 50%; transform: translateX(-50%); */
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
    }
    .mytooltip {
      position: relative;
      display: inline-block;
    }
    /* Mũi tên trỏ LÊN (↑) */
    .mytooltip .mytext::after {
      content: "";
      position: absolute;
      bottom: 100%;           /* Đính vào cạnh trên tooltip */
      left: 50%;
      margin-left: -6px;      /* Nửa border-width */
      border-width: 6px;
      border-style: solid;
      /* Màu: blue - trong suốt - trong suốt - trong suốt */
      border-color: blue transparent transparent transparent;
    }
    .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 (Mũi tên trỏ lên)

.arrow-up {
  width: 0; height: 0;
  border: 6px solid transparent;
  border-bottom-color: blue;  /* Cạnh DƯỚI có màu = mũi tên trỏ LÊN */
}

Logic ngược chiều

Lưu ý: **Cạnh border nào có màu → mũi tên trỏ NGƯỢC CHIỀU ĐÓ**

• `border-top-color` → mũi tên trỏ **xuống**
• `border-bottom-color` → mũi tên trỏ **lên**
• `border-left-color` → mũi tên trỏ **phải**
• `border-right-color` → mũi tên trỏ **trái**

Cải tiến hiện đại (Fade + Transform)

.mytooltip .mytext {
  /* ... */
  opacity: 0;
  transform: translateX(-50%) translateY(10px); /* Khởi đầu thấp hơn */
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  visibility: hidden;
}
.mytooltip:hover .mytext {
  opacity: 1;
  transform: translateX(-50%) translateY(0);    /* Trượt lên vị trí chính xác */
  visibility: visible;
}
.mytooltip .mytext::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: blue;
}

Tóm tắt 4 vị trí tooltip + mũi tên

/* TOP tooltip - mũi tên xuống */
bottom: 100%; left: 50%; transform: translateX(-50%);
::after { top: 100%; border-top-color: #333; }

/* BOTTOM tooltip - mũi tên lên */
top: 100%; left: 50%; transform: translateX(-50%);
::after { bottom: 100%; border-bottom-color: #333; }

/* LEFT tooltip - mũi tên phải */
top: 50%; right: 100%; transform: translateY(-50%);
::after { right: 100%; border-right-color: #333; }

/* RIGHT tooltip - mũi tên trái */
top: 50%; left: 100%; transform: translateY(-50%);
::after { left: 100%; border-left-color: #333; }