Tooltip Bootstrap: Hướng dẫn cách hiển thị thông tin bổ sung

Trong giao diện web hiện đại, người dùng luôn mong muốn có thông tin nhanh chóng mà không cần rời khỏi màn hình chính. Đây chính là lúc Tooltip phát huy tác dụng: hiển thị nội dung ngắn gọn ngay khi người dùng tương tác nhẹ như di chuột hoặc focus vào phần tử nào đó. Bootstrap cung cấp component Tooltip giúp việc hiển thị các gợi ý này trở nên đơn giản, hiệu quả và chuyên nghiệp hơn. 

Đọc bài viết này để hiểu ngay:

• Tooltip trong Bootstrap là gì?
• Cách khởi tạo và tùy chỉnh Tooltip
• Các thuộc tính quan trọng: nội dung, vị trí, hiệu ứng
• Bài tập thực hành Tooltip từ cơ bản đến nâng cao

Giới thiệu về Tooltip trong Bootstrap

Tooltip là gì?

Tooltip (gợi ý nổi bật) là những hộp thoại nhỏ xuất hiện khi người dùng di chuột (hover) hoặc tập trung (focus) vào một phần tử, nhằm hiển thị thông tin bổ sung ngắn gọn, ví dụ như hướng dẫn sử dụng, nhãn biểu tượng hoặc trạng thái nút.

Tooltip thường được áp dụng trên các thành phần như nút bấm, icon, liên kết hoặc trường form để:

• Giải thích ý nghĩa biểu tượng hoặc nút
• Gợi ý hành động khi người dùng tương tác
• Cung cấp thêm thông tin ngắn gọn mà không chiếm không gian giao diện

Trong Bootstrap, Tooltip là một phần của hệ thống component hỗ trợ bởi Popper.js, giúp xử lý vị trí và hiệu ứng tự động.

Ví dụ về tooltip trong Bootstrap

Tại sao nên dùng Tooltip của Bootstrap?

Bootstrap cung cấp component Tooltip mạnh mẽ và dễ triển khai, giúp bạn nhanh chóng tích hợp tooltip vào giao diện web mà không cần viết thêm nhiều CSS hoặc JavaScript thủ công. Tooltip của Bootstrap sử dụng thư viện Popper.js để xử lý định vị, cho phép hiển thị tooltip ở nhiều vị trí khác nhau như trên, dưới, trái, phải.

So với việc tự viết tooltip bằng HTML/CSS, Bootstrap mang lại nhiều ưu điểm rõ rệt:

Cách khởi tạo và kích hoạt Tooltip trong Bootstrap

Bổ sung thư viện Popper vào dự án dùng Bootstrap

Tooltip trong Bootstrap sử dụng thư viện bên ngoài Popper.js để định vị vị trí hiển thị. Nếu không có Popper, tooltip sẽ không hoạt động hoặc hiển thị sai vị trí. Tùy theo cách tích hợp Bootstrap vào dự án, bạn cần đảm bảo Popper đã được thêm vào theo 2 cách sau: 

1. Khi dùng CDN (cách phổ biến và nhanh nhất)

Nếu dùng CDN, nên sử dụng file bootstrap.bundle.min.js vì trong đó đã bao gồm sẵn Popper:

<!-- Chỉ cần 1 file JS duy nhất -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Trường hợp bạn không dùng bản bundle, mà dùng file bootstrap.min.js riêng, bắt buộc phải thêm Popper phía trước:

<!-- Phải thêm Popper thủ công -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

Việc dùng sai thứ tự hoặc thiếu Popper là nguyên nhân khiến tooltip không hiển thị.

2. Khi dùng gói cài đặt (npm hoặc yarn): Nếu bạn sử dụng dự án được cấu hình với Webpack, Vite hoặc Parcel và cài Bootstrap qua npm/yarn, cần đảm bảo:

• Cài đủ cả Bootstrap và Popper:

npm install bootstrap @popperjs/core

• Import đúng thứ tự trong JavaScript:

import * as bootstrap from 'bootstrap'
import '@popperjs/core'

Kích hoạt Tooltip cơ bản

Sau khi đã tích hợp đúng thư viện Bootstrap và Popper.js, bạn cần chủ động kích hoạt tooltip bằng JavaScript. Đây là cơ chế opt-in, nghĩa là Bootstrap không tự khởi tạo tooltip để đảm bảo hiệu năng.

Cách đơn giản nhất là quét toàn bộ các phần tử có thuộc tính data-bs-toggle=“tooltip” và khởi tạo bằng đoạn mã sau: 

 <script>
   // Kích hoạt tooltip
   const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
   const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el))
 </script>

Trong đó, đoạn mã trên sẽ tìm tất cả các phần tử có gắn tooltip trên trang và tự động khởi tạo. Lưu ý:

• Nên đặt đoạn script này sau phần HTML chứa tooltip, hoặc đảm bảo được thực thi sau khi DOM đã load.
• Tooltip chỉ hoạt động khi phần tử có thuộc tính data-bs-title (hoặc title) và nội dung không được để trống.

Ví dụ sử dụng đoạn mã sau:

   <button type="button" class="btn btn-secondary"
     data-bs-toggle="tooltip" data-bs-placement="top"
     data-bs-title="Nội dung tooltip hiển thị khi di chuột">
     Di chuột vào tôi
   </button>

Kết hợp với code javascript ở bên trên để kích hoạt tooltip, ta có kết quả sau:

Lúc chưa hover

      Lúc hover chuột vào nút

Các trường hợp sử dụng Tooltip Bootstrap

Tooltip có thể được áp dụng linh hoạt cho nhiều thành phần trong giao diện web như nút bấm, liên kết, biểu tượng hoặc trường nhập liệu. Dưới đây là các trường hợp sử dụng phổ biến kèm ví dụ minh họa.

1. Tooltip trên nút (button)

Trường hợp thường gặp nhất là gắn tooltip vào các nút bấm, giúp người dùng hiểu rõ hơn về hành động khi họ tương tác. Tooltip sẽ xuất hiện ở phía trên (hoặc vị trí được chỉ định) khi người dùng di chuột (hover) hoặc focus vào nút.

Ví dụ:

   <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Nhấn để gửi biểu mẫu">
     Gửi
   </button>

Kết quả:

Đây là cách làm phổ biến khi muốn bổ sung mô tả ngắn cho các nút có nội dung ngắn gọn hoặc chỉ chứa biểu tượng.

2. Tooltip trên liên kết (link)

Tooltip cũng được sử dụng hiệu quả khi gắn vào các liên kết, đặc biệt là những liên kết không có mô tả rõ ràng. Việc gắn tooltip cho liên kết sẽ giúp người dùng biết trước hành động sẽ xảy ra khi nhấn vào liên kết, từ đó tăng sự chủ động khi thao tác.

Ví dụ:

  <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Xem thêm thông tin chi tiết">
     Chi tiết
   </a>

Kết quả:

3. Tooltip trên biểu tượng (icon)

Khi sử dụng biểu tượng để thay thế văn bản trong giao diện, việc thêm tooltip là rất cần thiết để đảm bảo người dùng hiểu được ý nghĩa của biểu tượng đó. Ví dụ:

   <i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Thông tin thêm"></i>

Kết quả:

Tooltip thường được dùng cho các biểu tượng như dấu chấm hỏi, cảnh báo, chỉnh sửa, xóa… trong bảng dữ liệu, form hoặc dashboard.

4. Tooltip trên ô nhập liệu

Trong các biểu mẫu, tooltip giúp hiển thị gợi ý nhập liệu hoặc mô tả ngắn gọn về định dạng yêu cầu mà không cần chiếm thêm không gian hiển thị.

Tooltip sẽ tự động hiển thị khi người dùng focus vào ô nhập. Trường hợp này rất phù hợp để hướng dẫn người dùng nhập đúng định dạng mà không cần sử dụng thêm dòng mô tả dưới field.

Ví dụ:

<input type="text" class="form-control" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Nhập tên không dấu, tối đa 50 ký tự" placeholder="Tên người dùng">

Kết quả:

5. Tooltip trên hình ảnh hoặc vùng đặc biệt

Tooltip cũng có thể gắn vào hình ảnh, logo hoặc các thẻ div, span, miễn là phần tử đó có thể được focus hoặc hover.

Cách này thường được áp dụng trong các trang quản trị, bảng thống kê hoặc thẻ người dùng để tiết kiệm không gian và cung cấp thêm thông tin phụ khi cần thiết.

Ví dụ:

<img src="https://itviec.com/assets/logo_black_text-04776232a37ae9091cddb3df1973277252b12ad19a16715f4486e603ade3b6a4.png" width="50%" height="50%" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Ảnh đại diện của người dùng">

Kết quả:

Các nhóm thuộc tính và class chính trong Tooltip Bootstrap

Tooltip trong Bootstrap được thiết kế linh hoạt với nhiều tùy chọn cấu hình thông qua class, thuộc tính HTML (data-bs-*), cũng như JavaScript.

Việc nắm rõ các nhóm thuộc tính và class chính sẽ giúp bạn dễ dàng kiểm soát cách tooltip hiển thị, vị trí, hiệu ứng cũng như tùy biến giao diện. Dưới đây là ba nhóm nội dung quan trọng nhất cần nắm khi sử dụng Tooltip.

Quản lý nội dung của Tooltip

Nội dung chính của tooltip được khai báo thông qua thuộc tính data-bs-title hoặc title. Trong thực tế, cả hai thuộc tính đều được hỗ trợ. Khi sử dụng title, Bootstrap sẽ tự động chuyển thành data-bs-title khi khởi tạo tooltip.

<!-- Dùng title -->
<a href="#" data-bs-toggle="tooltip" title="Tooltip hiển thị mặc định">Liên kết 1</a>


<!-- Dùng data-bs-title -->
<a href="#" data-bs-toggle="tooltip" data-bs-title="Tooltip sử dụng data-bs-title">Liên kết 2</a>

Lưu ý, Tooltip chỉ hiển thị khi nội dung không rỗng, nếu title hoặc data-bs-title bị thiếu hoặc để trống, tooltip sẽ không xuất hiện.

Thay đổi vị trí của Tooltip

Mặc định, tooltip sẽ hiển thị ở phía trên phần tử (top). Tuy nhiên, bạn có thể dễ dàng thay đổi vị trí thông qua thuộc tính data-bs-placement. Bootstrap hỗ trợ bốn vị trí chính: top, right, bottom, left.

Ví dụ:

   <button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip hiển thị bên dưới">
     Di chuột vào đây
   </button>

Kết quả khi thay 4 vị trí vào thuộc tính data-bs-placement:

Ngoài ra, bạn cũng có thể sử dụng placement=“auto”, Bootstrap sẽ tự động tính toán vị trí hiển thị phù hợp nhất dựa vào không gian hiển thị hiện có.

Tùy chỉnh hiệu ứng

Tooltip trong Bootstrap mặc định có hiệu ứng xuất hiện mờ dần (fade). Bạn có thể điều chỉnh hiệu ứng hiển thị, thời gian trễ và giao diện bằng các thuộc tính như sau:

• Hiệu ứng fade

Tooltip sử dụng hiệu ứng fade để làm mờ dần khi hiển thị và ẩn đi. Hiệu ứng này được bật mặc định. Nếu muốn tắt, bạn có thể truyền tuỳ chọn animation: false ở đoạn mã khởi tạo tooltip. Ví dụ:

   new bootstrap.Tooltip(document.querySelector('#myTooltip'), {
     animation: false
   })

Việc tắt hiệu ứng có thể hữu ích trong những trường hợp cần hiển thị tức thì, hoặc để tương thích tốt hơn với các thiết bị có hiệu suất thấp.

• Tuỳ chỉnh thời gian trễ khi hiển thị hoặc ẩn tooltip

Bạn có thể thiết lập độ trễ khi tooltip bắt đầu hiển thị hoặc biến mất bằng thuộc tính data-bs-delay hoặc javascript. Giá trị có thể là một số (áp dụng chung cho cả show và hide) hoặc một đối tượng với từng giá trị riêng biệt.

Ví dụ để áp dụng độ trễ 500ms khi hiển thị và 200ms khi ẩn tooltip. Bạn có thể làm như sau:

Cách 1: Dùng data-bs-delay trong HTML

   <button class="btn btn-info" data-bs-toggle="tooltip" data-bs-title="Hiển thị sau 0.5 giây" data-bs-delay='{"show": 500, "hide": 200}'>
     Tooltip có độ trễ
   </button>

Cách 2: Thêm tùy chọn trong hàm khởi tạo tooltip

   new bootstrap.Tooltip(document.querySelector('#myTooltip'), {
     delay: { show: 500, hide: 200 }
   })

Việc thiết lập delay rất hữu ích khi bạn muốn tooltip không xuất hiện ngay lập tức (tránh gây rối cho người dùng khi chỉ lướt qua).

• Tuỳ chỉnh nội dung tooltip

Mặc định, tooltip chỉ hiển thị nội dung dạng văn bản (text). Nếu muốn hiển thị HTML như in đậm, in nghiêng, hoặc chèn icon, bạn cần bật tùy chọn data-bs-html=“true”.

   <button id="myTooltip" class="btn btn-dark" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title='<i class="bi bi-exclamation-triangle-fill text-warning me-1"></i><b>Lưu ý:</b> Không chia sẻ thông tin cá nhân.'
>
     Cảnh báo
   </button>

Kết quả:

Lưu ý: Việc bật html: true có thể tiềm ẩn rủi ro bảo mật nếu nội dung tooltip đến từ người dùng. Hãy đảm bảo dữ liệu đã được kiểm soát hoặc qua bộ lọc an toàn (sanitize).

Làm việc với Tooltip bằng JavaScript

Ngoài cách sử dụng Tooltip thông qua các thuộc tính HTML (data-bs-*), Bootstrap còn cung cấp API JavaScript mạnh mẽ giúp bạn linh hoạt kiểm soát quá trình khởi tạo, hiển thị, ẩn hoặc cập nhật nội dung Tooltip trong runtime. Điều này đặc biệt hữu ích khi làm việc với nội dung động, tương tác phức tạp hoặc cần thay đổi hành vi mặc định.

Khởi tạo Tooltip bằng JavaScript

Bạn có thể khởi tạo Tooltip cho một phần tử cụ thể bằng cách sử dụng cú pháp:

new bootstrap.Tooltip(element)

Trong đó, tham số truyền vào là phần tử DOM muốn áp dụng tooltip.

Ví dụ khởi tạo một tooltip cơ bản:

<button id="myButton" class="btn btn-dark" data-bs-toggle="tooltip" data-bs-title="tooltip của button">
     Nút bấm
</button>


 <script>
   const el = document.getElementById('myButton')
   const tooltip = new bootstrap.Tooltip(el)
 </script>

Hoặc khởi tạo với tuỳ chọn cấu hình:

const el = document.getElementById('myButton')   
const tooltip = new bootstrap.Tooltip(el, {
     placement: 'bottom',
     animation: true,
     html: true,
     customClass: 'custom-tooltip',
     delay: { show: 300, hide: 100 }
   })

Bạn cũng có thể khởi tạo hàng loạt tooltip bằng cách quét tất cả phần tử có data-bs-toggle=“tooltip” như sau:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el))

Lưu ý: Tooltip chỉ hoạt động khi phần tử được khởi tạo thành công và có nội dung data-bs-title hoặc title.

Các phương thức thao tác Tooltip trong JavaScript

Sau khi tooltip đã được khởi tạo, bạn có thể dùng các phương thức sau để thao tác trực tiếp trong JavaScript. Các phương thức này chỉ dùng được sau khi bạn đã khởi tạo một instance (phiên bản cụ thể) của bootstrap.Tooltip cho phần tử HTML.

Ví dụ:

const el = document.getElementById('myButton')
const instance_tooltip = new bootstrap.Tooltip(el)
tooltip.show()

Lúc này, instance_tooltip là một đối tượng đại diện cho tooltip của phần tử #myButton, và bạn có thể thao tác với nó qua các phương thức có sẵn.

Ví dụ: cập nhật nội dung tooltip sau khi đã khởi tạo

const tooltip = bootstrap.Tooltip.getInstance(document.getElementById('myButton'))


tooltip.setContent({
 '.tooltip-inner': '<b>Thông tin mới</b> đã được cập nhật!'
})

Một số lưu ý khi sử dụng Tooltip Bootstrap

Khi làm việc với Tooltip trong Bootstrap, có một số điểm quan trọng cần nắm rõ để tránh gặp lỗi hoặc hành vi không như mong muốn trong giao diện người dùng. Dưới đây là những lưu ý cần thiết mà bạn nên xem xét kỹ trước khi triển khai:

1. Tooltip cần được khởi tạo thủ công: Tooltip không được kích hoạt tự động vì Bootstrap muốn tối ưu hiệu năng. Vì vậy, bạn cần chủ động khởi tạo chúng bằng JavaScript.
2. Tooltip sẽ không hiển thị nếu không có nội dung: Tooltip yêu cầu có title hoặc data-bs-title hợp lệ. Nếu trường này trống hoặc không tồn tại, tooltip sẽ không được render.
3. Tooltip không hoạt động với phần tử bị ẩn hoặc phần tử disabled: Nếu phần tử bị display: none hoặc disabled, tooltip sẽ không hiển thị khi bạn cố gắng kích hoạt nó.
4. Tooltip phụ thuộc vào Popper.js để định vị chính xác: Bootstrap sử dụng thư viện Popper.js để Tooltip hiển thị đúng vị trí và tự động điều chỉnh khi vượt khỏi màn hình. Hãy chắc chắn bạn đã có Popper.js trong mã nguồn của mình.

Bài tập luyện tập sử dụng Tooltip

Dưới đây là 3 bài tập thực hành theo cấp độ từ dễ đến nâng cao để bạn làm quen và nắm vững cách sử dụng Tooltip trong Bootstrap.

1. Bài tập cơ bản: thêm Tooltip cho một nút có nội dung “Xem thêm” với nội dung tooltip là “Hiển thị thêm thông tin chi tiết”.

2. Bài tập trung bình: tạo 4 nút với Tooltip xuất hiện lần lượt ở các vị trí: top, right, bottom, left

3. Bài tập nâng cao: tạo một nút có tooltip sử dụng HTML để hiển thị thông báo với màu nền tuỳ chỉnh và icon cảnh báo.

Lời giải

1. Bài tập cơ bản

Sử dụng thuộc tính data-bs-toggle=“tooltip” và data-bs-title để khởi tạo nội dung tooltip. Sau đó, dùng JS để kích hoạt tooltip.

   <button class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Hiển thị thêm thông tin chi tiết">
     Xem thêm
   </button>

 <script>
   const el = document.getElementById('myButton');
   new bootstrap.Tooltip(el);
 </script>

2. Bài tập trung bình

Sử dụng thuộc tính data-bs-placement giúp bạn tùy chỉnh vị trí xuất hiện của Tooltip so với phần tử gốc, bên cạnh sử dụng vòng lặp javascript để làm gọn code khởi tạo tooltip.

   <button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip phía trên">Trên</button>
   <button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip bên phải">Phải</button>
   <button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip phía dưới">Dưới</button>
   <button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip bên trái">Trái</button>


 <script>
   const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
   [...tooltipTriggerList].forEach(el => new bootstrap.Tooltip(el));
 </script>

3. Bài tập nâng cao

Sử dụng thuộc tính data-bs-html=“true” để cho phép Tooltip có thể chứa HTML trong phần nội dung và thêm thuộc tính data-bs-custom-class để class tùy chỉnh, cho phép bạn thay đổi màu sắc và kiểu hiển thị theo nhu cầu.

 <button class="btn btn-dark" data-bs-toggle="tooltip" data-bs-html="true" data-bs-custom-class="custom-tooltip" data-bs-title="<b>⚠️ Cảnh báo:</b> Không chia sẻ thông tin cá nhân.">
    Thông báo
 </button>


 <style>
   .custom-tooltip {
     --bs-tooltip-bg: #dc3545;
     --bs-tooltip-color: #fff;
     font-size: 14px;
   }
 </style>


 <script>
   const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
   [...tooltipTriggerList].forEach(el => new bootstrap.Tooltip(el));
 </script>

Câu nhỏ thường gặp về Tooltip Boostrap

Tooltip có hoạt động trên phần tử bị disabled không?

Tooltip không hoạt động trực tiếp trên các phần tử bị disabled, như <button disabled>, vì các phần tử này không thể nhận sự kiện tương tác như hover, focus, hoặc click, trong khi đây chính là các sự kiện mà tooltip cần để hiển thị. Để xử lý trường hợp này, bạn hãy bọc phần tử bị disabled trong một phần tử khác như <span> và gán tooltip cho phần tử bao ngoài. Ví dụ:

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Nút bị vô hiệu hóa">
    <button class="btn btn-secondary" disabled>Disabled</button>
</span>

Làm sao để tooltip hiển thị khi click thay vì hover?

Mặc định, tooltip được kích hoạt khi có sự kiện hover vào phần tử chỉ định, để thay đổi hành vi này thành click, bạn cần thay đổi thuộc tính trigger khi khởi tạo tooltip:

 const el = document.getElementById('myButton');
 new bootstrap.Tooltip(el, { trigger: 'click' });

Tooltip có tự động điều chỉnh vị trí nếu bị che không?

Tooltip sử dụng Popper.js để xử lý vị trí, nếu vị trí ban đầu bị che, Popper sẽ cố gắng điều chỉnh tooltip sang hướng khác phù hợp. Ngoài ra, bạn có thể sử dụng thuộc tính placement=“auto” để Bootstrap sẽ tự động tính toán vị trí hiển thị phù hợp nhất dựa vào không gian hiển thị hiện có.

   <button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-title="Tooltip hiển thị tự động">
     Di chuột vào đây
   </button>

Tổng kết

Tooltip trong Bootstrap là một công cụ nhỏ nhưng vô cùng hữu ích để nâng cao trải nghiệm người dùng bằng cách hiển thị thông tin bổ sung một cách tinh tế và tiết kiệm không gian. Với hệ thống thuộc tính linh hoạt, hỗ trợ hiệu ứng mượt mà và khả năng tương tác mạnh mẽ, tooltip Bootstrap phù hợp với mọi loại giao diện từ đơn giản đến phức tạp. Qua bài viết này, ITviec hy vọng bạn đã nắm vững cách sử dụng, tùy chỉnh và xử lý các tình huống đặc biệt khi làm việc với tooltip trong Bootstrap, từ đó ứng dụng hiệu quả vào dự án web thực tế của mình.