Share Tạo tooltip đơn giản với thư viện Hint.css

filiallion

Administrator
Staff member
Administrator
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:
HTML:
<link href="path/to/hint.min.css" rel="stylesheet">
Và để sử dụng tooltip thì các bạn tham khảo ví dụ sau:
HTML:
<span class="hint--bottom" aria-label="Welcome to Gextend">Gextend</span>
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.
 
Back
Top