Plugin chú giải công cụ Bootstrap
Plugin chú giải công cụ
Plugin Tooltip là một hộp bật lên nhỏ xuất hiện khi người dùng di chuyển con trỏ chuột qua một phần tử:
Mẹo: Các plugin có thể được đưa vào riêng lẻ (sử dụng tệp "tooltip.js" riêng lẻ của Bootstrap) hoặc tất cả cùng một lúc (sử dụng "bootstrap.js" hoặc "bootstrap.min.js").
Cách tạo chú giải công cụ
Để tạo chú giải công cụ, hãy thêm thuộc tính data-toggle="tooltip"
vào một phần tử.
Sử dụng thuộc tính title
để chỉ định văn bản sẽ được hiển thị bên trong chú giải công cụ:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Lưu ý: Chú giải công cụ phải được khởi tạo bằng jQuery: chọn phần tử được chỉ định và gọi phương thức tooltip()
.
Đoạn mã sau sẽ kích hoạt tất cả chú giải công cụ trong tài liệu:
Ví dụ
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Hãy tự mình thử »Chú giải công cụ định vị
Theo mặc định, chú giải công cụ sẽ xuất hiện phía trên phần tử.
Sử dụng thuộc tính data-placement
để đặt vị trí của chú giải công cụ ở trên cùng, dưới cùng, bên trái hoặc bên phải của phần tử:
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>
Hãy tự mình thử » Mẹo: Bạn cũng có thể sử dụng thuộc tính data-placement
với giá trị " auto
", thuộc tính này sẽ cho phép trình duyệt quyết định vị trí của chú giải công cụ. Ví dụ: nếu giá trị là " auto left
", chú giải công cụ sẽ hiển thị ở bên trái khi có thể, nếu không thì ở bên phải.
Hoàn thành tham khảo chú giải công cụ Bootstrap
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện của chú giải công cụ, hãy truy cập Tài liệu tham khảo về chú giải công cụ JS Bootstrap của chúng tôi.