Cách đơn giản nhất để thêm các tooltip (đoạn chú thích hiển thị khi ta di chuyển con trỏ qua một đoạn văn bản hoặc hình ảnh) vào văn bản là sử dụng HTML tag <ACRONYM> hay TITLE=””, ALT=””. Tuy nhiên, bạn cũng có một số thiết kế và kiểu dáng tooltip khác với ReactJS. Hãy cùng tìm hiểu qua bài viết sau đây!

React Joyride

Đây là một thành phần React để hiển thị một tập hợp các tooltip sẽ hướng dẫn người mới dùng làm quen với ứng dụng mới của bạn.

React Floater

Thư viện này biến 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 tương tự như Floater. Bạn có thể thêm tooltip và cửa sổ bật lên, cũng như có thể thêm các tính năng khác với thành phần này thông qua sandbox.

React Autotip

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

React Tippy

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

React Gint

Đây là một thành phần React mở rộng Hint.css. Các thành phần này thêm một vài tính năng không có sẵn trong Hint.css như vị trí tự động, độ trễ và chức năng Callback (gọi lại).

Ember Tooltips

Là một thành phần Ember.js để tạo tooltip, nó được xây dựng trên Popper.js. Thành phần này cũng được thiết kế với khả năng Accessibility in mind và tiếp tục cải thiện để tuân thủ theo khoảng 508 tiêu chuẩn về vấn đề này.

D3 Tip

Đây là một plugin D3.js. D3.js là thư viện JavaScript để hiển thị dữ liệu như biểu đồ, bản đồ, sơ đồ, v.v... Plugin này cho phép bạn hiển thị tooltip ở trên cùng của các dữ liệu này.

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 jQuery
• Các công cụ tạo tooltip hữu ích với VueJS