Share Tạo tooltip chuyên nghiệp với thư viện Tooltip.js

filiallion

Administrator
Staff member
Administrator
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:
Code:
npm install tooltip.js --save
Sau đó, các bạn tích hợp vào website với dòng mã lệnh HTML như sau:
HTML:
<script src="path/to/tooltip.js"></script>
Bây giờ, các bạn tạo một thành phần sử dụng tooltip như sau:
HTML:
<a href="#" id="tooltip">Tooltip</a>
Tiếp theo là cài đặt thư viện Tooltip.js:
JavaScript:
var tooltip = new Tooltip(
    document.getElementById('tooltip'),
    {
        placement: 'top',
        title: 'Welcome to Gextend'
    }
);
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.
 
Back
Top