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

Tạo tooltip là cách nhanh chóng và đơn giản nhất để thêm chú thích cho một hình ảnh hay một đoạn văn bản mà không cần nhấp vào bất cứ thứ gì. Hãy cùng tìm hiểm 6 công cụ tạo tooltip hữu ích với VueJS qua bài viết sau đây!

V-Tooltip

V-Tooltip là một thành phần Vue.js được hỗ trợ bởi Popper.js. Nó cung cấp một chỉ thị mới có tên là v-tooltip, có thể được thêm vào bất kỳ phần tử nào để tạo ra một tooltip. V-tooltip có thể chứa nội dung tooltip hoặc Options. Ngoài chỉ thị v-tooltip tùy chỉnh, bạn cũng có thể thêm tooltip với thành phần v-popover. 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.

V-Tooltip

Vue-Bulma Tooltip

Một thành phần Vue.js để tạo tooltip dựa trên khung giao diện người dùng Bulma. Thư viện này là một phần của Vue Bulma. Tuy nhiên, thành phần tooltip này có sẵn như là một module NPM có tên vue-bulma-tooltip mà 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 chỉ thị được gọi là v-tooltip. Tuy nhiên, nó không cung cấp thành phần v-popover.

Vue-Directive-Tooltip

Vue-Tippy

Thư viện này biến Tippy.js thành một thành phần Vue.js. Nó có một chỉ thị 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 hiển thị thành phần Vue.js tùy chỉnh trên nội dung tooltip bằng cách sử dụng tùy chọn html.

Vue-Tippy

VueJS-Popover

Một Vue.js tùy chỉnh với một chỉ thị tùy chỉnh được gọi là v-popover và hai thành phần tùy chỉnh cụ thể là <popover><tooltip> giúp các nhà phát triển linh hoạt hơn trong việc thêm tooltip trong ứng dụng Vue.js.

VueJS-Popover

Vue-Gint

Đây là một plugin Vue.js bao gồm Hint.css. Plugin này có tính năng chỉ thị v-hint-css để thêm tooltip. Nó mang đến cùng một tập hợp các tùy chọn như Hint.css, vì vậy bạn có thể thêm chúng dưới dạng một JavaScript object hoặc một Vue.js modifier.

Vue-Gint

Xem thêm:

Thứ Năm, 05/07/2018 09:07
32 👨 509
0 Bình luận
Sắp xếp theo