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à 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 data-toggle="tooltip"
thuộc tính vào một phần tử.
Sử dụng titlethuộc tính để 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 tooltip()phương thức.
Đoạn mã sau sẽ kích hoạt tất cả các chú giải công cụ trong tài liệu:
Thí dụ
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Chú giải công cụ định vị
Theo mặc định, chú giải công cụ sẽ xuất hiện trên đầu phần tử.
Sử dụng data-placementthuộc tính để đặ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ử:
Thí 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>
Toàn bộ 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 chú giải công cụ, phương pháp và sự kiện, hãy truy cập Tài liệu tham khảo chú giải công cụ Bootstrap JS của chúng tôi .