Chú giải công cụ Bootstrap 5
Chú giải công cụ
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-bs-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ụ:
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip"
title="Hooray!">Hover over me!</button>
Lưu ý: Chú giải công cụ phải được khởi tạo bằng JavaScript để hoạt động.
Đ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>
var tooltipTriggerList =
[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var
tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</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-bs-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-bs-toggle="tooltip" data-bs-placement="top" title="Hooray!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Hooray!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Hooray!">Hover</a>
Hãy tự mình thử »