Hướng dẫn tooltip css codepen - chú giải công cụ css codepen

Đã đăng vào thg 2 20, 2019 1:16 SA 2 phút đọc 2 phút đọc

Giới thiệu

Tooltips là chú thích tuyệt vời để bổ sung và làm phong phú trải nghiệm người dùng cung cấp gợi ý và thêm thông tin cho người dùng. Có rất nhiều plugin JavaScript cung cấp chức năng này, nhưng nếu bạn không muốn sử dụng các thư viện đó, thì có thể xử lý nó chỉ bằng cách sử dụng sử dụng data attributes của HTML và môt số CSS đơn giản.

Cách thực hiện

• HTML

  Đầu tiên chúng ta tạo ra một link hoặc một button với HTML, trong đó sẽ thiết lập nội dung của tooltip bằng cách truyền vào data attributes của thẻ html đó.

  c-tooltip

• CSS

  Tiếp theo ta sẽ CSS cho thẻ HTML trên bằng cách sử dung ::after và ::before để tạo ra 1 hình chữ nhât đơn giản với nội dụng sử dụng data-c-tooltip trong thẻ HTML, và mũi tên phía dưới của tooltips.

data-c-tooltip]:after {
  z-index: 1000;
  padding: 8px;
  width: 160px;
  background-color: #000;
  background-color: rgba(51, 51, 51, 0.9);
  color: #fff;
  content: attr(data-c-tooltip);
  font-size: 14px;
  line-height: 1.2;
}
[data-c-tooltip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: rgba(51, 51, 51, 0.9)
}

Sau đó ta CSS tạo hiêu ứng sau khi hover và ta sẽ được kết quả như ảnh:

Custom Tooltips

Ngoài ra ta có thể tao ra tooltips ở các vị trí khác nhau như trên, dưới, trái, phải bằng cách thêm attributes tooltip-position và css cho attributes đó

Ví dụ với tooltips ở bên trái:

• HTML

  c-tooltip

• CSS

[tooltip-position='left']:before,
[tooltip-position='left']:after {
  right: 100%;
  bottom: 50%;
  left: auto;
}
[tooltip-position='left']:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #000;
  border-left-color: rgba(51, 51, 51, 0.9);
}
[tooltip-position='left']:hover:before,
[tooltip-position='left']:hover:after,
[tooltip-position='left']:focus:before,
[tooltip-position='left']:focus:after {
  -webkit-transform: translateX(-12px);
  -moz-transform: translateX(-12px);
  transform: translateX(-12px);
}

Tiếp theo ta sẽ CSS cho thẻ HTML trên bằng cách sử dung ::after và ::before để tạo ra 1 hình chữ nhât đơn giản với nội dụng sử dụng data-c-tooltip trong thẻ HTML, và mũi tên phía dưới của tooltips.

Sau đó ta CSS tạo hiêu ứng sau khi hover và ta sẽ được kết quả như ảnh:

Custom Tooltips

Ngoài ra ta có thể tao ra tooltips ở các vị trí khác nhau như trên, dưới, trái, phải bằng cách thêm attributes tooltip-position và css cho attributes đó