Video học lập trình mỗi ngày

Tooltip là gì?

Tooltip là một công cụ nhỏ chứa những thông tin hữu ích khi người dùng hover qua những phần tử nhất định trên một trang web. Chúng là một thành phần giao diện người dùng hữu ích để cung cấp thông tin bổ sung cho người dùng mà không cần phải làm lộn xộn giao diện. 

Đó là lời giới thiệu ngắn gọn mang tính tượng trưng khi mà tất cả mọi người đã biết Tooltip rất nhiều là đã sử dụng qua rồi. Tiêu biểu như Tooltip Bootstrap chẳng hạn. Thế nhưng có một điều hết sức kỳ lạ, đó là việc nếu bạn muốn triển khai Tooltip Bootstrap thì bạn phải sử dụng thư việc của Bootstrap. 

Ví dụ như:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js

Ngoài ra khi đã sử dụng bootstrap.min.js rồi thì kèm theo đó là jquery.min.js đại loại là thế. Quan điểm xưa nay của tôi qua bài viết "10 cách cải thiện hiệu suất website" là không dùng "dao mổ trâu để thịt gà" chính vì vậy thay vì kéo một loạt thư viện như vậy thì tự code hoặc đi tham khảo chỗ nào mà chỉ làm bằng css thôi, chứ ai lại như thế. 

Và may thay tôi tìm được một tài liệu có hướng dẫn rất hay đó là "Setup a HTML tooltip on hover using CSS". Sau đây chia sẻ với các bạn. 

Tooltip css

Tất cả những gì cần nói thì đã viết ở trên rồi. Ở đây thì code thôi. Cho một thẻ p. Xem demo ở đây. 

<p>Example CSS Tooltip <span data-tooltip="Tooltips are used to provide information about an element on a web page.">i</span></p>

Tạo file css như sau:

[data-tooltip] {
  position: relative;
  cursor: pointer;
  background: black;
  color: white;
  font-size: 12px;
  border-radius: 1em;
  padding: 0 0.5em;
}

[data-tooltip]:before {
  content: attr(data-tooltip);
  position: absolute;
  opacity: 0; 
  width: 150px;
  transform:translateX(-50%);
  bottom: 25px;
  padding: 0.5em;
  background-color: black;
  border-radius: 0.25em;
  color: white;
  text-align: center;
  transition:0.2s;
}

[data-tooltip]:after {
  content: "";
  position: absolute;
  opacity: 0; 
  bottom: 15px;  
  margin-left: -5px; 
  border: 5px solid black;
  border-color: black transparent transparent transparent;
  transition:0.2s;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  opacity: 1; 
}

Đây là một trong những bài viết trong Series - Mẹo viết javascript. Hy vọng một chút thủ thuật nho nhỏ cũng mang lại những điều cần thiết để một trang web cải thiện hiệu suất nhiều hơn.