NTM Solutions

Facebook Youtube Google+

Thứ Năm, 6 tháng 4, 2017

Tự học Bootstrap - Cơ bản - bài 29 – Tooltip

Công cụ Tooltip

Tooltip chính là hộp pop-up nhỏ xuất hiện khi ta rê chuột lên 01 đối tượng .



Mẹo: công cụ này có thể được tích hợp độc lập trong 01 file (trong Bootstrap chính là file "tooltip.js"), hoặc tất cả trong 01 (khi dùng "bootstrap.js" hoặc "bootstrap.min.js").

Cách tạo 01 Tooltip

Để tạo 01 tooltip, ta thêm thuộc tính data-toggle="tooltip" vào 01 đối tượng.
Sử dụng thuộc tính title để xác định dòng văn bản hiển thị trong tooltip:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Ghi chú: Tooltips phải được khởi tạo bằng jQuery: chọn đối tượng muốn tạo tooltip và gọi phương thức tooltip()
Dòng mã sau sẽ kích hoạt công cụ tooltip trong trang web.
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>



Định vị trí Tooltips

Mặc định, tooltip sẽ xuất hiện ở vị trí top của đối tượng.
Sử dụng thuộc tính data-placement để thiết lập vị trí của tooltip ở đỉnh, đáy, trái hoặc bên phải đối tượng.

Ví dụ:

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>



Mẹo: Bạn có thể dùng thuộc tính data-placement với giá trị tiền tố là "auto", để trình duyệt quyết định vị trí của tooltip. Ví dụ:, nếu giá trị là "auto left", tooltip sẽ xuất hiện bên trái nếu có thể , còn không thì xuất hiện bên phải đối tượng.

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48