Tippy.js - Thư viện công cụ Javascript Vanilla nhẹ
Chú giải công cụ rất hữu ích để hiển thị một chút nội dung bổ sung. Họ tiết kiệm không gian trên trang và cung cấp cho bạn một căn phòng để làm sinh động thứ gì đó thu hút sự chú ý của mọi người.
Trước đây, chúng tôi đã trình bày các tập lệnh công cụ nhưng nhiều nhà phát triển muốn có thư viện tùy chỉnh. Một số thích jQuery, những người khác muốn vanilla JS đơn giản.
Plugin Tippy hoạt động tốt nhất cho nhóm sau Ai muốn làm việc với mã JS vanilla.
Với Tippy.js bạn nhận được một thư viện tooltip đầy đủ chức năng chạy trên Popper.js. Điều này có nghĩa là plugin đi kèm với một sự phụ thuộc nhỏ, nhưng nó dễ quản lý hơn nhiều so với thư viện jQuery.
Vậy vẻ đẹp của Tippy là gì? Nó thêm vào các kiểu Popper mặc định để tạo chú giải công cụ năng động hơn với hiệu ứng đáng kinh ngạc.
Bạn có thể thêm mờ dần, slide, wiggles, thời lượng tùy chỉnh, phương thức gọi lại và thậm chí các hiệu ứng động như công cụ tự động xoay.
Thực sự plugin này sẽ đưa các chú giải công cụ của bạn lên một cấp độ hoàn toàn mới với các tính năng sử dụng được xác định rõ. Bạn có thể giữ chú giải công cụ cố định vào màn hình với các yếu tố trang nhất định, hoặc yêu cầu họ thay đổi hướng nếu màn hình quá nhỏ.
Nó cũng hỗ trợ các thiết bị cảm ứng làm cho điều này hoàn hảo cho bố cục đáp ứng. HTML công cụ được dán nhãn bằng các tiêu chuẩn ARIA để có khả năng truy cập tối đa. Tôi không thể nghĩ bất cứ điều gì xấu để nói về plugin này!
Nếu bạn muốn thử điều này trong trang web của riêng bạn, chỉ cần tải xuống một bản sao của mã nguồn từ GitHub. Điều này bao gồm các tệp plugin chính cùng với các chi tiết về cách cài đặt nó bằng cách sử dụng npm.
Tệp tập lệnh Tippy.js mặc định đi kèm với Popper.js, do đó bạn thậm chí không cần tải xuống thư viện bổ sung đó. Tất cả những gì bạn cần là tệp JS / CSS mặc định và một trang web để chạy các chú giải công cụ.
Nếu bạn muốn tìm hiểu sâu hơn về một số ví dụ, hãy xem trang chủ của Tippy.js bao gồm các mẫu trực tiếp + đoạn mã bạn có thể sao chép và sử dụng lại.
