Bài 24: Tooltip trong Bootstrap 5
Tooltip là một box pop-up nhỏ, hiện ra khi người dùng di chuyển con trỏ chuột qua một nhân tố trên giao diện. Dưới đây là cách tạo Tooltip trong Bootstrap 5.
Cách tạo Tooltip trong Bootstrap 5
Để tạo một tooltip, thêm thuộc tính data-bs-toggle="tooltip"
cho một nhân tố. Dùng title để xác định nội dung cần hiện trong tooltip:
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">Hover over me!</button>
Lưu ý: Tooltip phải được khởi chạy bằng JavaScript.
Code sau sẽ cho phép hiện tất cả tooltip 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>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Ví dụ Tooltip trên QuanTriMang.com</h3>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Chào mừng bạn tới QuanTriMang.com!">
Trỏ chuột vào nút bấm này!
</button>
</div>
<script>
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
Xác định vị trí Tooltip
Mặc định, tooltip sẽ hiện ở phía trên phần tử tương ứng. Dùng thuộc tính data-bs-placement
để thiết lập vị trí của tooltip ở phía trên, dưới, bên trái hoặc phải của phần tử đó. Code cơ bản:
<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>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Vị trí Tooltip trên QuanTriMang.com</h3>
<p>Thuộc tính data-bs-placement xác định vị trí tooltip.</p>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Hooray!">Trên</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Hooray!">Dưới</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Hooray!">Trái</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Hooray!">Phải</a>
</div>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
Như bạn thấy cách tạo tooltip bằng Bootstrap 5 cũng không quá khó phải không? Chỉ cần bạn ghi nhớ một số code cơ bản và thay giá trị phù hợp là có thể nhúng nó vào web hay app để sử dụng ngay.
Bạn nên đọc
-
Bài 21: Navbar trong Bootstrap 5
-
Bài 22: Carousel trong Bootstrap 5
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 23: Modal trong Bootstrap 5
-
Bài 10: Button trong Bootstrap 5
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 6: Bảng trong Bootstrap 5
-
Bài 4: Typography trong Bootstrap 5
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Giải phương trình bậc 2 một ẩn bằng Python
Hôm qua 3 -
Cách tính BHXH 1 lần, hưởng BHXH 1 lần mới nhất
Hôm qua -
Đội hình Định Mệnh DTCL mùa 11, cách chơi, lên đồ
Hôm qua -
Hướng dẫn đóng dấu ngoặc số âm trong Excel
Hôm qua 1 -
Cách thiết lập VPN trên iPhone hoặc iPad
Hôm qua 3 -
Code Roblox mới nhất tháng 10 và cách nhập Roblox Promo Code 2025
Hôm qua 6 -
Hàm trong Python là gì? Các hàm trong Python
Hôm qua 2 -
Game luyện chuột, game nhanh tay lẹ mắt trên máy tính
Hôm qua 3 -
45 câu đố vui cho trẻ về nghề nghiệp
Hôm qua -
Firmware là gì? Firmware khác Software như thế nào?
Hôm qua