- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
Hiện nay có khá nhiều thư viện giúp các bạn tạo tooltip dễ dàng và chuyên nghiệp, ví dụ như jQuery UI Tooltip mà tôi đã giới thiệu với các bạn ở bài viết "Tạo tooltip chuyên nghiệp với thư viện jQuery UI Tooltip". Bài viết này tôi tiếp tục giới thiệu với các bạn một thư viện khác, chỉ bằng CSS đó là Hint.css. Thư viện Hint.css không mạnh như jQuery UI Tooltip nhưng nếu chỉ thực hiện các tooltip với nội dung đơn giản thì Hint.css hoàn toàn có thể đáp ứng với hiệu quả tốt nhất.
Để sử dụng thư viện Hint.css, các bạn tải thư viện tại địa chỉ https://github.com/chinchang/hint.css/releases.
Các bạn tích hợp thư viện Hint.css vào website với dòng mã lệnh như sau:
Và để sử dụng tooltip thì các bạn tham khảo ví dụ sau:
Trong đó, class CSS "hint--bottom" khai báo tooltip sẽ hiển thị bên dưới đối tượng, nội dung tooltip được khai báo ở thuộc tính "aria-label".
Các bạn có thể xem thêm các ví dụ của thư viện Hint.css tại địa chỉ https://kushagragour.in/lab/hint và hướng dẫn sử dụng tại địa chỉ https://github.com/chinchang/hint.css.
Để sử dụng thư viện Hint.css, các bạn tải thư viện tại địa chỉ https://github.com/chinchang/hint.css/releases.
Các bạn tích hợp thư viện Hint.css vào website với dòng mã lệnh như sau:
HTML:
<link href="path/to/hint.min.css" rel="stylesheet">
HTML:
<span class="hint--bottom" aria-label="Welcome to Gextend">Gextend</span>
Các bạn có thể xem thêm các ví dụ của thư viện Hint.css tại địa chỉ https://kushagragour.in/lab/hint và hướng dẫn sử dụng tại địa chỉ https://github.com/chinchang/hint.css.