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 văn bản nê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.