Microtip – thư viện CSS Tooltip với Native Accessibility Features

Bạn có thể thực hiện tìm kiếm nhanh trên GitHub để tìm hàng chục thư viện tooltips tuỳ chỉnh.

Microtip là một tài nguyên độc nhất vì nó chạy trên các CSS tooltips tinh khiết, cung cấp thẩm mỹ tùy chỉnh và sử dụng mã nguồn có thể truy cập đầy đủ cho tất cả người dùng.

Nếu bạn đã không bao giờ nghĩ nhiều về khả năng tiếp cận sau đó Microtip có thể thay đổi ý kiến của bạn. Đó là sự pha trộn hoàn hảo của thiết kế sạch sẽ với chức năng cho tất cả thiết bị, tất cả trình duyệt và cho hầu hết người dùng . Trên trang chủ, bạn sẽ tìm thấy một liên kết tải xuống thư viện Microtip cùng với một loạt các mẫu code demo.

Bạn có thể thiết lập này thông qua trình quản lý gói, tải trực tiếp, hoặc bằng cách kéo nó trực tiếp từ CDN. Nó đi kèm với một tập tin CSS và đó là về cơ bản tất cả những gì bạn cần.

Khi bạn đã thêm Microtip vào trang của mình, bạn có thể bắt đầu thêm cáct ooltips vào các phần tử của trang. Điều này hoàn toàn phù hợp với WAI vì vậy chúng phù hợp với các tiêu chuẩn truy cập hiện đại hoàn hảo.

Dưới đây là một mã chú giải công cụ mẫu đính kèm với phần tử nút có vị trí tùy chỉnh:

<button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">

Không nhiều code phải không?

Thư viện này là siêu nhẹ với tổng số là 1KB mà vẫn có rất nhiều mẫu tooltip demo.

Thuộc tính CSS tùy chỉnh có thể được chuyển qua các thuộc tính HTML để xác định font size,** transition style**, easing và nhiều cài đặt khác.

Bạn cũng có thể ghi đè CSS trực tiếp để tạo các tooltips tùy chỉnh với các màu hoặc phông chữ khác nhau.

Hãy xem mục tuỳ chỉnh trên trang chính để biết thêm chi tiết. Mọi thứ đều chạy trên nền HTML và CSS, do đó bạn không cần bất kỳ kiến thức javascript nào để làm việc này.

Microtip là siêu dễ dàng để thiết lập và tùy chỉnh vì vậy nếu bạn biết một chút kiến thức về frontend bạn sẽ được sử dụng tốt nó.

Nhưng hãy nhìn vào repo GitHub để có thêm thông tin thiết lập và copy nó vào stylesheet.