55. Tooltip Trong CSS

Tooltip trong CSS: Tooltip là một cách để hiển thị thông tin bổ sung khi người dùng di chuột qua một phần tử trên trang web. Trong CSS, bạn có thể tạo tooltip bằng cách sử dụng pseudo-element ::before hoặc ::after để thêm nội dung tooltip và sử dụng thuộc tính position để điều chỉnh vị trí hiển thị. Dưới đây là một ví dụ về cách tạo tooltip bằng CSS:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: help;
    }

    .tooltip::before {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background-color: #333;
      color: white;
      padding: 5px;
      border-radius: 3px;
      font-size: 14px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
    }

    .tooltip:hover::before {
      opacity: 1;
      visibility: visible;
    }
  </style>
</head>
<body>
  <p>This is a <span class="tooltip" data-tooltip="Helpful information">tooltip</span> example.</p>
</body>
</html>

Trong ví dụ này:

Chúng ta tạo một phần tử với class .tooltip để áp dụng tooltip.
Sử dụng pseudo-element ::before để thêm nội dung của tooltip.
Dùng thuộc tính content để lấy nội dung tooltip từ thuộc tính data-tooltip của phần tử.
Điều chỉnh vị trí tooltip bằng cách đặt position: absolute, bottom: 100%, và left: 50%, sau đó sử dụng transform để điều chỉnh vị trí giữa.
Tooltip được ẩn ban đầu với opacity: 0 và visibility: hidden. Khi người dùng hover vào phần tử, chúng ta sử dụng pseudo-class :hover để hiển thị tooltip bằng cách thay đổi opacity và visibility.

Lưu ý rằng ví dụ trên chỉ minh họa cách tạo tooltip đơn giản. Bạn có thể tùy chỉnh CSS và thêm các hiệu ứng khác để làm cho tooltip trở nên hấp dẫn và phù hợp với thiết kế của bạn.

Leave a Comment Cancel Reply