Bootstrap 5 Tooltip

Công cụ tip

Công cụ tip là một hộp nhảy nhỏ xuất hiện khi người dùng di chuột qua phần tử:

Cách tạo công cụ tip

Để tạo công cụ tip, hãy thêm data-bs-toggle="tooltip" Thuộc tính được thêm vào phần tử.

Vui lòng sử dụng title Thuộc tính xác định văn bản hiển thị trong công cụ tip:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Tuyệt vời!">Hãy dừng trên tôi!</button>

Ghi chú:}Công cụ thông báo phải được khởi tạo bằng JavaScript mới có thể hoạt động.

Mã dưới đây sẽ kích hoạt tất cả các công cụ thông báo trong tài liệu:

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
}
</script>

Thử nghiệm ngay

Định vị công cụ thông báo

Mặc định, công cụ thông báo sẽ xuất hiện ở phần trên của phần tử.

Vui lòng sử dụng data-bs-placement Cài đặt vị trí công cụ thông báo trên phần trên, dưới, bên trái hoặc bên phải của phần tử:

Mô hình

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Rất tuyệt vời!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Rất tuyệt vời!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Rất tuyệt vời!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Rất tuyệt vời!">Hover</a>

Thử nghiệm ngay