Tạo mũi tên tooltip ở dưới cùng với CSS

Tooltip với mũi tên chỉ xuống (bottom arrow)

Dùng pseudo-element ::after trên hộp tooltip để tạo tam giác mũi tên. Đặt top: 100% (dưới tooltip), left: 50% + margin-left: -nửa chiều rộng để căn giữa.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .mytooltip {
      position: relative;
      display: inline-block;
      margin-top: 50px; /* Khoảng cách để thấy mũi tên */
      cursor: help;
    }
    .mytooltip .mytext {
      visibility: hidden;
      width: 140px;
      background-color: blue;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px;
      position: absolute;
      z-index: 1;
      bottom: 120%; /* Tooltip nằm TRÊN trigger */
      left: 50%;
      margin-left: -70px; /* Nửa width */
      opacity: 0;
      transition: opacity 0.3s;
    }
    /* Mũi tên chỉ XUỐNG (dưới tooltip, trỏ vào trigger) */
    .mytooltip .mytext::after {
      content: "";
      position: absolute;
      top: 100%; /* Dưới tooltip */
      left: 50%;
      margin-left: -8px;
      border-width: 8px;
      border-style: solid;
      border-color: blue transparent transparent transparent; /* Mũi tên chỉ xuống */
    }
    .mytooltip:hover .mytext {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="mytooltip">
    Di chuột qua tôi
    <span class="mytext">Nội dung tooltip</span>
  </div>
</body>
</html>

Tooltip hiện ra **trên** phần tử trigger, mũi tên ::after chỉ xuống vào trigger. border-color: blue transparent transparent transparent tạo tam giác đỉnh xuống, màu xanh khớp nền tooltip.