- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
Trước đây tôi đã giới thiệu với các bạn thư viện Popper.js tại bài viết "Tạo popper chuyên nghiệp với thư viện Popper.js" và như các bạn đã biết thì popper là một thành phần tương tự như tooltip nhưng nó hỗ trợ việc trình bày nội dung tốt hơn tooltip. Bài viết này tôi sẽ giới thiệu với các bạn thư viện Tooltip.js để các bạn có căn cứ so sánh sự khác biệt giữa hai thành phần này cũng như xác định được khi nào nên sử dụng popper, khi nào nên sử dụng tooltip. Cả hai thư viện này cùng do một nhóm phát triển nên việc sử dụng khá giống nhau.
Có thể các bạn đã sử dụng nhiều thư viện tooltip khác nhau cho các dự án website của mình, mỗi thư viện lại cung cấp một giao diện tooltip khác nhau, cùng với cách sử dụng cũng khác nhau, có thư viện cho một giao diện đẹp, có thư viện dễ dàng trong cài đặt và thư viện Tooltip.js theo đánh giá của tôi thì vừa có giao diện đẹp lại sử dụng đơn giản.
Các bạn có thể tải thư viện Tooltip.js bằng dòng lệnh NPM sau:
Sau đó, các bạn tích hợp vào website với dòng mã lệnh HTML như sau:
Bây giờ, các bạn tạo một thành phần sử dụng tooltip như sau:
Tiếp theo là cài đặt thư viện Tooltip.js:
Các bạn có thể tìm hiểu thêm về thư viện Tooltip.js tại địa chỉ https://popper.js.org/tooltip-documentation.html.
Có thể các bạn đã sử dụng nhiều thư viện tooltip khác nhau cho các dự án website của mình, mỗi thư viện lại cung cấp một giao diện tooltip khác nhau, cùng với cách sử dụng cũng khác nhau, có thư viện cho một giao diện đẹp, có thư viện dễ dàng trong cài đặt và thư viện Tooltip.js theo đánh giá của tôi thì vừa có giao diện đẹp lại sử dụng đơn giản.
Các bạn có thể tải thư viện Tooltip.js bằng dòng lệnh NPM sau:
Code:
npm install tooltip.js --save
HTML:
<script src="path/to/tooltip.js"></script>
HTML:
<a href="#" id="tooltip">Tooltip</a>
JavaScript:
var tooltip = new Tooltip(
document.getElementById('tooltip'),
{
placement: 'top',
title: 'Welcome to Gextend'
}
);