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

[filiallion]

Language

Tiếng Việt

Popper là một thành phần tương tự như tooltip nhưng linh hoạt hơn tooltip ở việc trình bày nội dung cũng như cách thức hiển thị trên website. Hiện nay có nhiều thư viện cung cấp thành phần popper này dưới nhiều tên gọi khác nhau, ví dụ như CSS framework UIkit thì đó là thành phần drop. Bài viết này tôi giới thiệu với các bạn một thư viện cung cấp thành phần popper độc lập đó là Popper.js.

Thư viện Popper.js là một thư viện JavaScript rất mạnh, có thể đáp ứng bất kỳ yêu cầu nào của các bạn lập trình viên để tạo ra popper. Ngoài ra với khả năng tuỳ biến cao, thư viện Popper.js còn giúp cho các bạn dễ dàng sử dụng để tuỳ chỉnh theo mong muốn của mình mà không cần phải viết mã lệnh mở rộng. Đặc điểm quan trọng nữa của Popper.js đó là hỗ trợ cho cả React, một JavaScript framework rất phổ biến hiện nay.

Các bạn có thể tải về sử dụng thư viện Popper.js bằng dòng lệnh NPM sau:

npm install popper.js --save

Sau đó, các bạn tích hợp vào website với dòng mã lệnh HTML như sau:

<script src="path/to/popper.js"></script>

Bây giờ, các bạn thiết kế thành phần popper như ví dụ sau:

<button type="button" id="reference">Reference</button>
<div id="popper">Popper content</div>

Tiếp theo, các bạn cài đặt thư viện Popper.js như sau:

var popper = new Popper(
    document.getElementById('reference'),
    document.getElementById('popper'),
    {
        placement: 'top'
    }
);

Các bạn có thể tìm hiểu thêm về thư viện Popper.js tại địa chỉ https://popper.js.org/popper-documentation.html.