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