Hơn 40 tập lệnh công cụ hữu ích với CSS, JavaScript và jQuery

Một phần tử UI thú vị, chú giải công cụ (còn gọi là infotips) làm cho một hộp nhỏ xuất hiện khi con trỏ chuột được di chuột qua một văn bản hoặc hình ảnh nhất định với thông tin liên quan đến yếu tố được di chuột qua. Về trải nghiệm người dùng, chú giải công cụ cung cấp cho người dùng nguồn thông tin nhanh nhất và dễ dàng nhất mà không cần phải nhấp vào bất cứ điều gì.

Mặc dù cách đơn giản nhất để thêm chú giải công cụ vào văn bản của bạn là sử dụng thẻ HTML hoặc TITLE =””, ALT =””. Tuy nhiên, có một số thực sự mát mẻ chú giải công cụ thiết kế và kiểu bạn có thể tạo bằng JavaScript và CSS sử dụng tập lệnh tooltips. Chúng ta hãy xem.

CSS

Balloon.css - Balloon là thư viện CSS sáng tác với SasS và LESS để hiển thị một tooltip tương tác. Nội dung và vị trí của chú giải công cụ có thể được cấu hình thông qua dữ liệu- thuộc tính. Bạn có thể hiển thị chú giải công cụ ở bên trái, bên phải hoặc bên trái. Bạn có thể thêm biểu tượng cảm xúc vào nội dung. Balloon.css có thể được cài đặt thông qua NPM và tải nó từ CDNJS.

Simptip - Được tạo bằng SasS cho phép cấu hình lại và biên dịch lại mã cho phù hợp với yêu cầu của bạn. Vị trí và nội dung của chú giải công cụ có thể được cấu hình thông qua tên lớp và data-tooltip thuộc tính. Simptip có sẵn như là một Gói NPM, Sợi và Bower.

Gợi ý - Một trong những thư viện CSS phổ biến để hiển thị chú giải công cụ, Hint.css được sử dụng bởi nhiều trang web phổ biến như Fiverr, Webflow và Tridiv. Không giống như hai thư viện CSS khác, Hint.css sử dụng nhãn aria Bạn có thể cấu hình kích thước và màu sắc thông qua tên lớp sử dụng phương pháp BEM. Hint.css khả dụng trên NPM, Bower và CDNJS.

Microtip - Một thư viện CSS tuyệt vời khác để tạo tooltip được xây dựng với “Khả năng tiếp cận” trong tâm trí, Microtip sử dụng nhãn aria để giữ nội dung chú giải công cụ và dữ liệu- thuộc tính để cấu hình kích thước và vị trí chú giải công cụ.

Nó sử dụng biến CSS cho phép bạn tùy chỉnh chú giải công cụ chỉ bằng tệp CSS đơn giản. Các biến CSS đã được hỗ trợ trong nhiều trình duyệt web và di động. Microtip có sẵn dưới dạng NPM, gói Sợi và UNPkg CDN.

Ôn Châu - Đó chỉ là 733 byte. Một thư viện siêu nhẹ được viết bằng CSS siêu hiện đại sử dụng CSSNext, LESS và SCSS vì vậy có thể tùy chỉnh và biên dịch lại các kiểu theo cách bạn muốn. Có thể tải xuống Wenk từ NPM, Sợi và các dịch vụ CDN miễn phí sau: rawgit.com và unpkg.com.

Công cụ - Khác thư viện CSS nhẹ chỉ có kích thước khoảng 1 KB. Tooltippy bao gồm một số chủ đề được tạo sẵn để tạo kiểu cho tooltip. Nó được viết bằng bộ tiền xử lý CSS có tên là Stylus. Xem hướng dẫn về cách bạn có thể mở rộng hoặc tùy chỉnh các chủ đề này.

ElegantTips - Thư viện này đi kèm với một vài chủ đề được xây dựng trước có thể thay đổi với tên lớp được cung cấp. Không giống như các thư viện khác dựa trên HTML5 dữ liệu- hoặc là nhãn aria thuộc tính, ElegantTips yêu cầu một yếu tố bổ sung được thêm vào để tạo thành chú giải công cụ. Điều này cho phép bạn thêm nghĩa đen bất kỳ nội dung nào vào tooltip ngoài văn bản đơn giản.

Tootik - Thư viện CSS này không chỉ cung cấp bảng mẫu ở định dạng CSS, LESS và SasS, nó còn cung cấp một GUI dễ sử dụng để tùy chỉnh chú giải công cụ. Bạn chỉ có thể sao chép và dán HTML được tạo bởi công cụ này. Nó đơn giản mà.

VanillaJS

TippyJS - Được cung cấp bởi Popper.js, TippyJS đi kèm với một sự phong phú của các tùy chọn để cấu hình tooltip. Chúng tôi có thể tùy chỉnh hình động, mũi tên chú giải công cụ, chiều rộng, kích thước, chủ đề và nhiều hơn nữa. Nó cũng cung cấp các hàm gọi lại mà bạn có thể thực thi một chức năng khi tooltip được hiển thị và ẩn. Các tính năng này làm cho TippyJS trở thành một trong những thư viện JavaScript mạnh mẽ trong danh sách của chúng tôi để tạo ra tooltip.

Công cụ Darsain - Thư viện này cung cấp việc thực hiện cơ bản của một tooltip. Tuy nhiên, nó cung cấp các tùy chọn mở rộng để định cấu hình hành vi tootip và tập hợp các tên lớp để thay đổi giao diện tooltip. Chú giải công cụ hoạt động tốt trong trình duyệt cũ hơn như IE9 và, nếu cần, IE8 với một vài điều chỉnh.

Bong bóng - Bubb có thể rất phù hợp cho người dùng JavaScript nâng cao. Sử dụng nó API mở rộng, ngoài việc hiển thị văn bản đơn giản, bạn có thể lập trình thêm một nội dung HTML phức tạp hơn vào tooltip. Nó khá tuyệt; bạn có thể tham khảo Tài liệu các ví dụ.

Popper - Chứa một trừu tượng kỹ thuật để tạo ra một cái gì đó “bật lên”, như một tooltip, một popover và thả xuống. TippyJS sử dụng nó làm nền tảng thư viện và được sử dụng bởi các tên tuổi lớn trên web như Bootstrap, Microsoft và Atlassian.

YY Tooltip - Không giống như các thư viện khác, YY Tooltip không yêu cầu bạn thêm một yếu tố hoặc thuộc tính HTML. Nó hoạt động hoàn toàn với JavaScript và nội dung, vị trí và màu sắc, được xác định trong Đối tượng thay vì trong phần tử HTML. Thật hoàn hảo khi được sử dụng cùng với một ứng dụng web JavaScript đầy đủ.

Position.js - Một thư viện JavaScript gốc tuyệt vời khác để tạo chú giải công cụ, Position.js cung cấp GUI để cấu hình chức năng và chỉ cần sao chép và dán mã được tạo ở đó. Position.js có thể được sử dụng cùng với React.js hoặc Vue.js.

Công cụ Bezet - Thư viện này cung cấp 14 tùy chọn để hiển thị chú giải công cụ; chẳng hạn như trên đúng, trái, dưới cùng, trung tâm bên trái, bên phải, Trung tâm trên, vv Trên hết, nó cũng đủ thông minh để có thể điều chỉnh vị trí chú giải công cụ dựa trên không gian có sẵn xung quanh tooltip. Kiểm tra bản demo.

Chuột - Thư viện JavaScrtipt này sẽ tạo ra một tooltip sẽ di chuyển dọc theo vị trí con trỏ. Chú giải công cụ được cấu hình không chuẩn bẫy chuột- thay vì sử dụng HTML5 dữ liệu- thuộc tính. Mousetip có sẵn như là một mô-đun NPM.

Internetips - Khá giống với MousetTip, tooltip được tạo bởi thư viện này theo vị trí con trỏ. Mọi thứ được cấu hình thông qua Đối tượng JavaScript thay vì HTML và các thuộc tính cũng được xây dựng cho các trình duyệt hiện đại. Nó nhẹ và nhanh.

MTip - Một thư viện JavaScript cho Tooltip với khả năng tương thích trình duyệt tuyệt vời. Nó tương thích với IE8, có thể tùy chỉnh hoàn toàn thông qua Tùy chọn và bạn có thể thêm Tooltip vào bất kỳ yếu tố nào ngay cả trên một img (một yếu tố hình ảnh).

Bong bóng - một thư viện JavaScript nhẹ cung cấp chức năng đơn giản của một “chú giải công cụ”. Thật dễ dàng để sử dụng thư viện JavaScript mà không có các tùy chọn phức tạp để tùy chỉnh đầu ra. Một tệp Sass được cung cấp nếu bạn muốn thay đổi giao diện tooltip. Kiểm tra bản demo.

Tipfy - Được xây dựng với cú pháp JavaScript hiện đại, ES6, Tipfy có kích thước chỉ 2 KB. Thư viện cung cấp hai phiên bản của tệp: tipfy.min.js cung cấp kịch bản với cú pháp ES6 hiện đại, và tipfy.es5.min.js nếu bạn cần khả năng tương thích với các trình duyệt cũ hơn. Nó sử dụng dữ liệu- thuộc tính để tùy chỉnh tooltip; các phía dữ liệu, ví dụ: được sử dụng để đặt hướng chú giải công cụ và sử dụng dữ liệu-tipfy-văn bản thuộc tính để thêm nội dung tooltip.

jQuery

Chú chó - Thư viện này cung cấp các tùy chọn mở rộng để tùy chỉnh hầu hết mọi thứ như chủ đề, hoạt hình, hỗ trợ cảm ứng, nội dung, kích hoạt mở và đóng, vv Nó cũng cung cấp trình nghe và gọi lại sự kiện tùy chỉnh cho phép các nhà phát triển mở rộng tooltip với các chức năng tùy chỉnh. Ngoài ra, là một plugin jQuery, tooltip sẽ hoạt động trong trình duyệt cũ hơn như IE6 tùy thuộc vào phiên bản jQuery đang được sử dụng.

Protip - Một plugin jQuery mở rộng khác, Protip hỗ trợ 49 vị trí, HTML cho nội dung chú giải công cụ, hỗ trợ biểu tượng, gọi lại tùy chỉnh, và nhiều hơn nữa. Protip cung cấp GUI cho phép bạn tùy chỉnh tooltip một cách dễ dàng.

PowerTip - Plugin jQuery này cũng mang đến Tùy chọn và API cung cấp cho các nhà phát triển một số cách khác nhau để triển khai các chú giải công cụ. Nó hỗ trợ điều hướng bàn phím; làm cho cửa sổ bật lên xuất hiện khi điều hướng các yếu tố với Chuyển hướng bàn phím. PowereTip là có sẵn dưới dạng mô-đun NPM. Nó có thể được sử dụng với RequireJS và Browserify.

Có thể truy cập Aria Tooltip - Một plugin jQuery có tính năng Trợ năng tích hợp, tooltip là được thiết kế để hiển thị hộp thoại với tiêu đề, nhiều dòng văn bản và nút đóng. Nó là một trong số đó trong danh sách của chúng tôi.

Lời khuyên - Một plugin jQuery đơn giản, nhưng nó mang lại các tính năng khá đặc biệt. Các nội dung tooltip được thiết lập với một data-tooltip thuộc tính. Thêm nữa là chúng ta cũng có thể bọc nội dung bằng các ký tự đặc biệt để định dạng nội dung tương tự như định dạng Markdown. Chúng ta có thể sử dụng * để làm cho nội dung đậm, ~ cho chữ nghiêng, và ^ cho tiêu đề.

Công cụ tối - Thư viện này cung cấp một số tính năng thực sự hữu ích để tăng sức mạnh cho tooltip. Ví dụ: chúng ta có thể thêm một nút xác nhận - Có và Không, làm mờ nền trong khi chú giải công cụ được hiển thị và thêm các yếu tố HTML đến nội dung. Tôi nghĩ bạn thực sự nên kiểm tra trang demo.

Công cụ Aria - Một tooltip khác có tính năng Trợ năng tích hợp, plugin jQuery này tuân thủ WAI-ARIA 1.1. Nó là phản ứng theo cách mà bạn có thể cung cấp các cấu hình khác nhau cho các kích thước khung nhìn khác nhau. Aria Tooltip có sẵn dưới dạng một mô-đun NPM có tên t-aria-tooltip.

Thanh công cụ.js - Mặc dù plugin jQuery khác chỉ có thể hiển thị nội dung văn bản hoặc HTML đơn giản trong một chú giải công cụ, nhưng điều này Plugin jQuery tạo một thanh công cụ. Chú giải công cụ sẽ chứa hai hoặc nhiều liên kết với một biểu tượng thường thực hiện một hành động trên nhấp chuột, giống như bất kỳ thanh công cụ. Kiểm tra các tài liệu và ví dụ.

VueJS

V-Tooltip - V-Tooltip là một thành phần Vue.js được cung cấp bởi Popper.js dưới mui xe. Nó cung cấp một chỉ thị mới v-tooltip có thể được thêm vào bất kỳ phần tử nào để tạo một tooltip. Các v-tooltip có thể chứa nội dung chú giải công cụ hoặc Tùy chọn. Ngoài phong tục v-tooltip Chỉ thị, bạn cũng có thể thêm tooltip với v-popover thành phần. Với thành phần này, bạn có thể thêm nội dung phức tạp hơn vào tooltip với thành phần Vue.js hoặc HTML.

Công cụ Vue-Bulma - Một thành phần Vue.js để tạo tooltip dựa trên Bulma UI Framework. Thư viện này là một phần của Vue Bulma. Nhưng thành phần tooltip có sẵn như là một mô-đun NPM có tên vue-bulma-tooltip bạn có thể sử dụng nó như là các thành phần độc lập.

Vue-Directive-Tooltip - Nhìn chung, nó tương tự như thành phần V-Tooltip dựa trên Popper.js và cung cấp cùng một lệnh được gọi là v-tooltip. Tuy nhiên, nó dường như không cung cấp v-popover thành phần.

Vue-Tippy - Thư viện này kết hợp Tippy.js thành một thành phần Vue.js. Nó có một lệnh Vue.js tùy chỉnh được gọi là v-tippy hoạt động như một thuộc tính HTML; chúng ta có thể thêm nội dung cho tooltip hoặc các tùy chọn để tùy chỉnh nó. Nó cũng ám thành phần Vue.js tùy chỉnh trên nội dung chú giải công cụ bằng cách sử dụng html Tùy chọn.

VueJS-Popover - Một Vue.js tùy chỉnh với một lệnh tùy chỉnh được gọi là v-popover và hai thành phần tùy chỉnh là và cung cấp sự linh hoạt cho các nhà phát triển để thêm chú giải công cụ trong ứng dụng Vue.js.

Vue-Gợi ý - Một plugin Vue.js bao bọc Hint.css. Các tính năng của plugin v-gợi ý-css chỉ thị để thêm tooltip. Nó mang cùng một bộ tùy chọn như Hint.css, để bạn có thể thêm chúng dưới dạng đối tượng JavaScript hoặc công cụ sửa đổi Vue.js.

Phản ứng

Phản ứng Joyride - Thành phần React để hiển thị một bộ chú giải công cụ sẽ hướng dẫn người dùng mới làm quen với ứng dụng mới của bạn.

Lò phản ứng - Thư viện này kết hợp Popper.js thành một thành phần React có tên Floater, vì vậy nó có các tính năng tuyệt vời giống như Floater. Bạn có thể thêm tooltip và popup, và bạn cũng có thể chơi xung quanh với thành phần này thông qua hộp cát này.

Phản ứng tự động - Một thành phần React đơn giản với tính năng tự động định vị, eact Autotip sẽ tự động điều chỉnh vị trí của tooltip khi không gian có sẵn xung quanh nó thay đổi.

Phản ứng Tippy - Được xây dựng trên đầu trang Tippy.js và Popover.js. Thư viện này giới thiệu một Chú giải công cụ thành phần đó bạn có thể đưa vào ứng dụng React của mình.

Phản ứng Gợi ý - Một thành phần React mở rộng Hint.css. Các thành phần thêm một vài tính năng không có sẵn trong Hint.css, chẳng hạn như tự động định vị, trì hoãn và chức năng gọi lại.

Hơn

Chú giải công cụ Ember - Một thành phần Ember.js để tạo các chú giải công cụ, nó được xây dựng dựa trên Popper.js. Thành phần này cũng được thiết kế dành cho Khả năng truy cập và tiếp tục cải thiện để tuân thủ khoảng 508 sự tuân thủ về vấn đề này.

Mẹo D3 - một plugin D3.js. D3j.