Chú giải công cụ Bootstrap 4
Chú giải công cụ Bootstrap 4
Thành phần Chú giải công cụ 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ử:
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ử »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.