Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
17 Thư Viện Tooltip Miễn Phí Dành Cho Website

17 Thư Viện Tooltip Miễn Phí Dành Cho Website


Ngày 13 Tháng 6 Năm 2020

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu các thư viện giúp bạn tạo chức năng tooltip bằng HTML CSS Javascript cho trang web với nhiều thiết kế và hiệu đẹp mắt nhé!

Tooltip Là Gì?

Tooltip là một thành phần giúp bạn chú thích thêm thông tin khi người dùng hover chuột vào một đối tượng nào đó trong trang web. Theo mình thấy nó sẽ giúp những người mới sử dụng trang web có thể hiểu được những chức năng một cách rõ ràng thông qua những thông tin bổ sung đó. Thông thường nó sẽ hiển thị giống như thuộc tính title trong thẻ a nhưng với thư viện tooltip thì bạn có thể dễ dàng thiết kế một tooltip đẹp mắt và được bổ sung thêm nhiều chức năng cho trang web của mình.

Ví Dụ Tooltip Cho Website

Nếu bạn muốn tìm hiểu thêm về tooltip và các ví dụ liên quan thì có thể truy cập đường dẫn bên dưới nhé!

Nguồn

Các Thư Viện Xây Dựng Tooltip

Tippy.js

Tippy.js là một thư viện mạnh mẽ giúp chúng ta tạo tooltip một cách dễ dàng. Bạn có thể linh hoạt trong việc sử dụng và mở rộng các chức năng của tooltip cho các đối tượng HTML như là thiết lập theme cho tooltip, lồng các tooltip vào nhau, thay đổi vị trị hiển thị của nó... Cách thiết lập cũng rất đơn giản bạn có thể cài đặt qua npm, yard hay dùng CDN để sử dụng trực tiếp cho trang HTML (Nó cũng có thư viện hỗ trợ cho React nữa nhé). Ngoài ra nó cũng có các bài hướng dẫn chi tiết cách thêm bớt các chức năng cho chương trình khi áp dụng vào trang web và ví dụ cho từng trường hợp cụ thể. Một thuộc tính mình khá thích ở nó là cho phép bạn tải nội dung (có thể là hình ảnh, chữ...) thông qua AJAX khi người dùng hover lên đối tượng HTML.

Thư Viện Tooltip Tippy.js

Nguồn Tippy.js

Tipped

Tipped là là một thư viện mã nguồn mở được xây dựng trên javascript giúp bạn có thể tạo một tooltip với thiết kế đẹp mắt và responsive trên nhiều màn hình thiết bị. Nó hiển thị được nhiều loại thông tin khác nhau thông qua việc hỗ trợ JSON, API, AJAX, JS... Bạn cũng có thể linh hoạt chỉnh sửa tooltip phù hợp với trang web thông qua các chức năng bổ sung như màu sắc, điều chỉnh kích cỡ, thời gian hiển thị tooltip...

Thư Viện Tooltip Tipped

Nguồn Tipped

POPPER

POPPER là một thư viện được viết bằng javascript với kích thước chỉ khoảng 3kB giúp bạn nâng cao tốc độ của website mà vẫn giữ được các chức năng mà một tooltip cần có. Nó hay được sử dụng trong các thư viện phổ biến hiện nay như là Bootstrap, Foundation, Material UI... Theo mình thấy nó giúp chúng ta giải quyết vấn đề hay gặp trong tooltip đó là xác định vị trị của phần tử và hiển thị nó tốt nhất có thể trên những màn hình thiết bị khác nhau.

Thư Viện Tooltip POPPER

Nguồn POPPER

Hint.css

Hint.css là một thư viện mã nguồn mở được xây dựng bằng CSS với kích thước chỉ khoảng 1.5kb. Với việc dùng CSS nên bạn có thể áp dụng cho nhiều loại dự án web khác nhau. Và cách thiết lập cũng rất đơn giản bạn chỉ cần tải về sau đó gọi class với chức năng mà mình muốn (Cái này bạn có thể xem ví dụ ở phần demo nhé). Hint.css thì chạy trên tất cả trình duyệt hiện đại và được responsive với nhiều màn hình thiết bị hiện nay.

Thư Viện Tooltip Hint.css

Nguồn Hint.css

Microtip

Microtip cũng là một thư viện xây dựng tooltip dựa trên CSS và nó chỉ có kích thước khoảng 1kb. Nếu bạn chỉ cần tạo một tooltip thuần túy, nhỏ gọn với chức năng cho phép tùy chỉnh vị trí hiển thị của tooltip và áp dụng được cho nhiều loại dự án khác nhau thì mình nghĩ đây là thư viện mà bạn nên lựa chọn.

Thư Viện Tooltip Microtip

Nguồn Microtip

Tootik

Tootik cũng là một thư viện CSS giúp bạn dễ dàng tạo ra tooltip. Bạn có thể thiết lập bằng nhiều cách như npm, CDN, bower hoặc là tải về máy để sử dụng. Bạn chỉ cần gọi thuộc tính data-tootik= "" trong thẻ HTML là có thể tạo ngay một tooltip rồi. Ngoài ra nếu bạn muốn thiết lập thêm các tính năng khác thì có thể sử dụng thuộc tính data-tootik-conf="". Ở trong trang demo của nó, chúng ta có thể thêm các thuộc tính mình mong muốn và đoạn mã tương ứng sẽ được tự động xuất ra. Thật đơn giản phải không nào!

Thư Viện Tooltip Tootik

Nguồn Tootik

Intro.js

Intro.js là một thư viện javascript giúp bạn có thể tạo ra các hướng dẫn về những chức năng hoặc những điều cần lưu ý cho người dùng khi lần đầu tiên truy cập vào trang web của chúng ta. Do là mã nguồn mở nên bạn có thể sử dụng cho tất cả dự án web khác nhau. Nó cũng rất nhẹ chỉ hoảng 10kb với file Javascript và 2.5kb với file CSS. Ngoài ra nó cũng tương thích với nhiều trình duyệt web hiện nay như Google Chrome, Firefox, Opera...

Thư Viện Tooltip Intro.js

Nguồn Intro.js

Toolbar.js

Toolbar.Js là một thư viện jquery giúp bạn có thể tạo ra một tooltip hiển thị thanh các thanh công cụ một cách dễ dàng. Nó bao gồm nhiều tính năng hữu ích như là cho phép chọn màu phù hợp với thiết kế trang web, điều chỉnh vị trí hiển thị của các thanh công cụ hay cho phép thêm các hiệu ứng chuyển động với tooltip...

Thư Viện Tooltip Toolbar.Js

Nguồn Toolbar.js

Wenk

Wenk là một thư viện nhỏ gọn dùng để hiển thị tooltip và có thể sử dụng cho CSS, LESS, SCSS... Với kích thước file rất nhỏ khoảng 733 bytes khi được nén. Bạn có thể dễ dàng thiết lập hoặc thêm các tính năng thông qua thuộc tính data trong thẻ HTML hay sử dụng class cho đối tượng.

Thư Viện Tooltip Wenk

Nguồn Wenk

Balloon.css

Balloon.css là một thư viện CSS chứa đầy đủ các tính năng của một tooltip cần có như là vị trí hiển thị, kích thước , màu sắc , cỡ chữ, thêm icon... Điểm mình thích ở nó là mỗi tính năng sẽ có một ví dụ chi tiết cùng với đoạn mã tương ứng. Bạn chỉ cần lựa chọn tooltip nào phù hợp với mình và dán vào trong chương trình là có thể sử dụng rồi. Nó sẽ được gọi thông qua thuộc tính trong thẻ HTML và class ở trong đối tượng đó. Tuy vậy nó cũng có hạn chế là bạn không thể sử dụng cho các thẻ tự đóng như là <img>, <input>...

Thư Viện Tooltip Balloon.css

Nguồn Balloon.css

Tooltip

Tooltip là một thư viện giúp bạn hiển thị tooltip ở mọi ví trí trong đối tượng như ở phía trên trái, trên phải, dưới trái, dưới phải... Bạn chỉ cần tải file về và gọi vị trí mình mong muốn trong quá trình thiết lập tooltip bằng Javascript là đã có thể xác định được cách hiển thị tooltip cho đối tượng đó rồi. Tuy vậy điểm hạn chế của nó là bạn phải tải 4 file về máy đề sử dụng bao gồm 3 file js và 1 file css.

Thư Viện Tooltip

Nguồn Tooltip

Tipso

Tipso là một thư viện được xây dựng bằng Jquery giúp bạn tạo ra tooltip với nhiều tính năng hữu ích và đẹp mắt. Yêu cầu là phải sử dụng Jquery trên phiên bản 1.7 nhé. Bạn dễ dàng thêm các tính năng thông qua việc gọi các thuộc tính trong quá trình thiết lập tooltip như là màu chữ, màu nền, nội dung tiêu đề, hiển thị nội dung thông qua AJAX... Điểm mình cảm thấy thích ở nó là việc kết hợp với thư viện Animate.css giúp bạn có thể tạo nhiều hiệu ứng chuyển động đẹp mắt cho tooltip của mình.

Thư Viện Tooltip Tipso

Nguồn Tipso

Tooltip jBox

Thư Viện Tooltip jBox

Nguồn Tooltip jBox

Protip

Thư Viện Tooltip Protip

Nguồn Protip

PowerTip

Thư Viện Tooltip PowerTip

Nguồn PowerTip

Simptip

Thư Viện Tooltip Simptip

Nguồn Simptip

D3-tip

Thư Viện Tooltip D3-tip

Nguồn D3-tip

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thư viện xây dựng tooltip hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!