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

Tooltip thường được sử dụng để mô tả cho một nút bấm, một thẻ input hay một liên kết dạng menu .v.v. Trong bài viết này mình sẽ hướng dẫn các bạn tạo Tooltip đơn giản với CSS.

c-tooltip

CSS

Với các vị trí khác nhau ta làm tương tự như ví dụ trên, các bạn có thể tham khảo demo bên dưới:

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: 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];
}

Với các vị trí khác nhau ta làm tương tự như ví dụ trên, các bạn có thể tham khảo demo bên dưới:

Như vậy, sau bài viết này, các bạn có thể tạo ra tooltips mà không cần sử dụng thư viện hay plugin bên ngoài mà chỉ cần HTML và CSS cơ bản

Chúc các bạn thành công!