Các công cụ tạo tooltip hữu ích với jQuery

Tooltip là một công cụ hiển thị phần chú thích cho một hình ảnh hoặc một đoạn văn bản khi di chuyển con trỏ tới văn bản hoặc hình ảnh đó. Bài viết sau đây sẽ liệt kê các công cụ tạo tooltip hữu ích với jQuery!

Tooltipster

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ư theme, hoạt ảnh, hỗ trợ cảm ứng, nội dung, trình kích hoạt mở và đóng, v.v... Nó cũng cung cấp tùy chọn nghe và gọi lại cho phép các nhà phát triển mở rộng tooltip bằng các chức năng tùy chỉnh. Ngoài ra, là một plugin jQuery, tooltip sẽ vẫn làm việc trong các trình duyệt cũ như IE6 tùy thuộc vào phiên bản jQuery đang được sử dụng.

Protip

Là một plugin jQuery mở rộng khác, Protip hỗ trợ 49 vị trí, HTML cho nội dung tooltip, 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 một 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 các 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 để thực hiện tooltip. Nó hỗ trợ điều hướng bàn phím và làm cho cửa sổ bật lên xuất hiện khi điều hướng các yếu tố bằng phím Tab. PowereTip có sẵn dưới dạng module NPM. Nó có thể được sử dụng với RequireJS và Browserify.

Accessible Aria Tooltip

Là một plugin jQuery có tính năng Accessibility được tích hợp sẵn, tooltip này được thiết kế để hiển thị hộp thoại có tiêu đề, nhiều dòng văn bản và nút đóng.

TipsJS

Là một plugin jQuery đơn giản, nhưng nó mang đến các tính năng khá đặc biệt. Nội dung của tooltip được đặt bằng thuộc tính data-tooltip. Hơn nữa, chúng ta cũng có thể bao 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. Bạn có thể sử dụng * để làm cho nội dung được in đậm, ~ cho in nghiêng và ^ cho tiêu đề.

Dark Tooltip

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 nút xác nhận - Yes và No, làm mờ nền trong khi tooltip được hiển thị và thêm các phần tử HTML vào nội dung.

Aria Tooltip

Là một tooltip khác với tính năng Accessibility được tích hợp sẵn, plugin jQuery này tuân thủ WAI-ARIA 1.1. Nó đáp ứng theo cách mà bạn 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 module NPM, có tên là t-aria-tooltip.

Toolbar.js

Trong khi các plugin jQuery khác chỉ có thể hiển thị văn bản đơn giản hoặc nội dung HTML trong một tooltip, plugin jQuery này tạo ra hẳn một thanh công cụ. Tooltip sẽ chứa hai hoặc nhiều liên kết với một biểu tượng thường sẽ thực hiện tác vụ khi nhấp vào, như bất kỳ thanh công cụ nào.

Xem thêm:

• Các công cụ tạo tooltip hữu ích với CSS
• Các công cụ tạo tooltip hữu ích với VanillaJS