Hint.css – một thư viện css dùng để làm Tooltip cho trang web của bạn. Vậy Tooltip là gì?
Tooltip – cách hay gọi là “công cụ chú thích”, đây là một cách tuyệt vời để hiển thị thêm thông tin trên một trang web mà không tốn thêm dung lượng. Công cụ chú thích thường xuất hiện khi di chuột. Và hiện tại có hàng trăm jQuery plugins có thể giúp bạn dễ dàng triển khai trên trang web của bạn.
Tuy nhiên, nhược điểm của việc sử dụng jQuery plugin là nó đi kèm rất nhiều options vô dụng. Điều này làm giảm hiệu suất tải trang web một cách rõ rệt.
Vì vậy hôm nay, chúng ta sẽ tìm kiếm một giải pháp mới thay thế cho phần Tooltip này. Với một loạt các tính năng mới trong CSS3, giờ đây bạn có thể tạo một Tooltip lạ mắt có thể so sánh chỉ bằng cách sử dụng CSS. Và tên thư viện CSS đó là Hint.css
Hint.css là gì?
Nội dung bài viết
Hint.css là một thư viện tooltip trong CSS. Sự khác biệt lớn giữa Hint.css và plugin tooltip khác là Hint.css sử dụng thuộc tính data-*, và thuộc tính class để hiển thị vị trí tooltips. Nó chỉ tương thích với những trình duyệt hiện đại, hỗ trợ đầy đủ HTML5 và CSS3.
Để sử dụng, chỉ cần thêm biểu định kiểu vào tài liệu HTML của bạn hoặc sao chép tất cả các quy tắc định kiểu vào biểu định kiểu của riêng bạn.
<link rel="stylesheet" href="hint.css">
Bây giờ, trong văn bản tài liệu của bạn, hãy bọc đoạn bạn muốn chèn Tooltip bằng một phần tử inline, như sử dụng phần tử span hoặc phần tử neo (anchor element). Và thêm nội dung Tooltip với thuộc tính data-hint, như dòng dưới đây.
However, because the freelance <span data-hint="The arena of commercial dealings">marketplaces</span> across the globe are filled with freelance contractors all tendering for a limited amount of jobs.
Về mặt kỹ thuật, đây là tất cả những gì bạn cần. Nếu bạn xem trước tài liệu của mình trong trình duyệt và di chuột qua, bạn sẽ thấy chú giải công cụ bật lên.
Tooltip này được hiển thị với phần tử giả (pseudo-element) và sử dụng CSS3 Transition cho chuyển động hình ảnh (animated).
Lời khuyên khi sử dụng Hint.css
Trừ khi bạn đang dùng archor element đi kèm với phần css được set mặc định. Nếu không thì bạn sẽ không thấy được cách show màn hình như hình phía trên đâu. Để có thể thay đổi trải nghiệm của người dùng về cách hiển thị Tooltips, Thegioiphp sẽ bổ sung thêm các css hiển thị cho bạn. Ví dụ:
span[data-hint] {
border-bottom: 1px dotted #aaa;
}
span[data-hint]:hover {
cursor: pointer;
}
Những style này sẽ cung cấp cho phần tử span với thuộc tính data-hint có một đường viền chấm ở dưới. Bạn có thể điều chỉnh phong cách để đáp ứng yêu cầu thiết kế riêng của bạn.
Cách show Tooltip
Chúng ta có thể hiển thị tooltips theo bốn hướng khác nhau: top, bottom, right và left bằng cách sử dụng các className được cung cấp.
Left
<span class="hint--left" data-hint="The arena of commercial dealings">marketplaces</span>
Right
<span class="hint--right" data-hint="The arena of commercial dealings">marketplaces</span>
Top
<span class="hint--top" data-hint="The arena of commercial dealings">marketplaces</span>
Bottom
<span class="hint--bottom" data-hint="The arena of commercial dealings">marketplaces</span>
Kết luận:
Với các thuộc tính nâng cao hơn trong CSS3 (advanced properties) trong ngày nay. Chúng ta không còn chỉ dựa vào JavaScript hoặc jQuery để tạo giao diện người dùng ưa thích. Những phần như sử dụng Tooltip với Hint.css sẽ giúp chúng ta tạo một giao diện người dùng trong tích tắc. Nhưng như đã nói ở phần đầu của bài viết này, kỹ thuật này chỉ cho phép chúng ta tạo một Tooltip đơn giản thôi .
Nếu bạn muốn tạo Tooltip nâng cao hơn, chẳng hạn như phần có hình ảnh hoặc hiển thị khi nhấp chuột thay vì khi di chuột, sử dụng JavaScript hoặc jQuery vẫn là cách tốt hơn để thực hiện.
