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

[filiallion]

Language

Tiếng Việt

Thư viện PowerTip là một thư viện khá mạnh để tạo tooltip với việc tạo ra các tooltip đơn giản chỉ là văn bản cho tới các tooltip là các mã HTML. Vì vậy, với thư viện PowerTip thì các bạn hoàn toàn có thể tạo ra các tooltip có nội dung được định dạng, các hình ảnh, các video...

Trước khi tích hợp thư viện PowerTip các bạn cần phải tích hợp thư viện jQuery. Các bạn tải thư viện jQuery tại địa chỉ http://jquery.com/download.

Các bạn tải thư viện PowerTip tại địa chỉ https://stevenbenner.github.io/jquery-powertip.

Các bạn tích hợp thư viện PowerTip vào website với nội dung mã lệnh như sau:

<link href="path/to/jquery.powertip.css" rel="stylesheet">
<script src="path/to/jquery.powertip.js"></script>

Cài đặt thư viện PowerTip với nội dung mã lệnh như sau:

$(function() {
    $('.power-tip').powerTip({
        placement: 'n'
    });
});

Và phần tử các bạn muốn hiển thị tooltip thì các bạn sử dụng như ví dụ sau:

<a href="#" class="power-tip" title="Nội dung tooltip">Gextend</a>

Các bạn có thể tìm hiểu thêm về thư viện PowerTip tại địa chỉ https://stevenbenner.github.io/jquery-powertip.

 

[donanh]

Trước khi tích hợp thư viện PowerTip các bạn cần phải tích hợp thư viện jQuery

Nếu như chạy riêng được và không phụ thuộc vào jQuery thì mình thích hơn.