Trong hướng dẫn này, bạn sẽ học cách tạo tooltip với Bootstrap.
Tooltip là một cửa sổ bật lên nhỏ xuất hiện khi người dùng đặt con trỏ chuột lên một phần tử như liên kết hoặc các button để cung cấp gợi ý hoặc thông tin về phần tử đang được di chuột.
Tooltip có thể rất hữu ích cho những khách truy cập mới vào trang web của bạn vì chúng cho phép người dùng biết mục đích của các biểu tượng và liên kết bằng cách đặt con trỏ chuột lên chúng.
Để tạo tooltip, bạn cần thêm thuộc tính data-bs-toggle="tooltip"
vào một phần tử. Văn bản chú giải sẽ hiển thị khi di chuột có thể được chỉ định bằng cách sử dụng thuộc tính title
.
Đây là mã tiêu chuẩn để thêm tooltip vào siêu liên kết.
<a href="#" data-bs-toggle="tooltip" title="Some text">Hover over me</a>
Tương tự, bạn có thể thêm tooltip vào các phần tử khác như button, icon, v.v.
Tooltip có thể được bật qua JavaScript - chỉ cần gọi phương thức tooltip()
bằng bộ chọn CSS id
hoặc class
của phần tử đích trong mã JavaScript của bạn.
Bạn có thể khởi tạo tooltip riêng lẻ hoặc tất cả cùng một lúc. Đoạn mã jQuery sau sẽ khởi tạo tất cả cáctooltip trên trang bằng cách chọn chúng theo thuộc tính data-bs-toggle
của chúng.
<script>
$(document).ready(function(){
$('[data-bs-toggle="tooltip"]').tooltip();
});
</script>
Kết quả của ví dụ trên sẽ giống như sau:
Lưu ý: Vì lý do hiệu suất, api data của tooltip là tùy chọn, có nghĩa là để sử dụng tooltip, bạn phải tự khởi tạo chúng. Ngoài ra, tooltip có tiêu đề độ dài bằng 0 sẽ không bao giờ được hiển thị, cũng như việc kích hoạt tooltip trên các phần tử ẩn sẽ không hoạt động.
Mẹo: Tooltip cho các phần tử.disabled
hoặcdisabled
phải được kích hoạt trên một phần tử bao bọc. Ngoài ra, khi các tooltip được kích hoạt từ các siêu liên kết trải dài nhiều dòng, nó sẽ được căn giữa. Bạn có thể sử dụngwhite-space: nowrap;
trên các siêu liên kết đó để tránh hành vi này.
Bạn có thể đặt tooltip để xuất hiện ở trên cùng, bên phải, bên dưới và bên trái của một phần tử.
Ví dụ sau sẽ cho bạn thấy cách thiết lập hướng của tooltip thông qua các thuộc tính data.
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</a>
Ví dụ sau sẽ cho bạn thấy cách thiết lập vị trí của tooltip thông qua JavaScript.
<script>
$(document).ready(function(){
$("#tipTop").tooltip({ placement : "top" });
$("#tipRight").tooltip({ placement : "right" });
$("#tipBottom").tooltip({ placement : "bottom" });
$("#tipLeft").tooltip({ placement : "left" });
});
</script>
Có một số tùy chọn có thể được truyền cho phương thức tooltip()
của Bootstrap để tùy chỉnh chức năng của plugin tooltip.
Tên | Kiểu | Giá trị mặc định | Mô tả |
---|---|---|---|
animation | boolean | true | Áp dụng chuyển đổi mờ dần CSS cho tooltip. |
container | string | element | false | false |
Thêm tooltip vào một phần tử cụ thể. Chỉ định |
delay | number | object | 0 |
Thời gian trì hoãn hiển thị và ẩn tooltip (mili giây) - không áp dụng cho loại kích hoạt thủ công. Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn / hiện Cấu trúc đối tượng là: |
html | boolean | false |
Chèn HTML vào tooltip. Nếu true, các thẻ HTML trong Sử dụng văn bản đơn giản nếu bạn lo lắng về các cuộc tấn công XSS. |
placement | string | function | 'top' |
Đặt vị trí của tooltip — auto | top | bottom | left | right. Khi giá trị |
selector | string | false | false |
Nếu một bộ chọn được cung cấp, các đối tượng tooltip sẽ được gắn vào các mục tiêu được chỉ định. Điều này thường được sử dụng để áp dụng tooltip cho các phần tử DOM được thêm động. |
template | string | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML cơ sở để sử dụng khi tạo tooltip.
Phần tử Phần tử bao bọc ngoài cùng phải có lớp |
title | string | element | function | '' | Đặt giá trị tiêu đề mặc định nếu thuộc tính title không có. |
trigger | string | 'hover focus' |
Chỉ định cách kích hoạt tooltip — click | hover | focus | manual. Bạn có thể truyền vào nhiều trình kích hoạt; ngăn cách bằng một khoảng trắng. Giá trị |
fallbackPlacements | array | ['top', 'right', 'bottom', 'left'] | Cho phép bạn chỉ định vị trí mà Popper sẽ sử dụng dự phòng. |
boundary | string | element | 'clippingParents' | Ranh giới ràng buộc tràn của tooltip (chỉ áp dụng cho công cụ sửa đổi preventOverflow của Popper). Nó cũng có thể chấp nhận một tham chiếu HTMLElement (chỉ qua JavaScript). |
customClass | string | function | '' |
Thêm các lớp vào tooltip khi nó được hiển thị. Xin lưu ý rằng các lớp này sẽ được thêm vào bên cạnh bất kỳ lớp nào được chỉ định trong mẫu. Để thêm nhiều lớp, hãy phân tách chúng bằng các khoảng trắng như: Bạn cũng có thể truyền vào một hàm trả về một chuỗi đơn chứa các tên lớp bổ sung. |
sanitize | boolean | true | Bật hoặc tắt tính năng sanitize. Nếu được kích hoạt các tùy chọn 'template' và 'title' sẽ được sanitize. |
allowList | object | Default value | Đối tượng chứa các thuộc tính và thẻ được phép. |
sanitizeFn | null | function | null | Cho phép bạn chỉ định chức năng sanitize của riêng bạn. |
offset | array | string | function | [0, 0] | Độ lệch vị trí của tooltip so với ban đầu của nó. Bạn cũng có thể truyền vào một chuỗi trong thuộc tính data với các giá trị được phân tách bằng dấu phẩy như: data-bs-offset="10,20" |
popperConfig | null | object | function | null | Cho phép bạn thay đổi cấu hình Popper mặc định của Bootstrap, xem cấu hình Popper. |
Bạn có thể đặt các tùy chọn này thông qua việc sử dụng các thuộc tính dữ liệu hoặc JavaScript. Để thiết lập các tùy chọn chú giải công cụ thông qua các thuộc tính dữ liệu, chỉ cần thêm tên tùy chọn vào data-bs-
cùng với giá trị chính xác, như data-bs-animation="false"
, data-bs-placement="bottom"
v.v.
Ngoài ra, khi chuyển các tùy chọn thông qua các thuộc tính dữ liệu, hãy đảm bảo thay đổi kiểu chữ hoa của tên tùy chọn từ camelCase thành kebab-case . Ví dụ, thay vì sử dụng data-bs-customClass="my-class"
, hãy sử dụng data-bs-custom-class="my-class"
.
Tuy nhiên, JavaScript là cách ưu tiên để đặt các tùy chọn này vì nó ngăn bạn khỏi công việc lặp đi lặp lại. Xem phần tùy chọn vượt qua bên dưới để biết cách đặt tùy chọn cho chú giải công cụ qua JavaScript.
Đây là các phương thức chuẩn của Bootstrap Tooltip:
Bạn có thể truyềncác tùy chọn vào tooltip bằng cách sử dụng đối tượng options
.
Ví dụ sau sẽ tự động đặt văn bản tiêu đề cho tooltip, nếu giá trị của thuộc tính title
bị bỏ qua hoặc bị thiếu trong các phần tử đã chọn:
<script>
$(document).ready(function(){
$("#myTooltip").tooltip({
title : "It looks like title attribute is not present."
});
});
</script>
Ví dụ sau sẽ cho bạn thấy cách đặt nội dung HTML bên trong tooltip:
<script>
$(document).ready(function(){
$("#myTooltip").tooltip({
title: "<h4><img src='images/smiley.png' width='30' alt='Smiley'> Hello, <b>I'm</b> <i>Smiley!</i></h4>",
html: true
});
});
</script>
Ví dụ sau sẽ chỉ cho bạn cách kiểm soát thời gian hiển thị và ẩn tooltip bằng cách sử dụng tùy chọn delay
của tooltip thông qua JavaScript.
<script>
$(document).ready(function(){
// Show and hide tooltip with same speed
$("#tinyTooltip").tooltip({
delay: 100
});
// Show and hide tooltip with different speed
$("#largeTooltip").tooltip({
delay: {show: 0, hide: 2000}
});
});
</script>
Ví dụ sau sẽ chỉ cho bạn cách tạo mẫu tùy chỉnh của riêng bạn cho tooltip thay vì sử dụng mẫu mặc định động thông qua JavaScript.
<script>
$(document).ready(function(){
$("#myTooltip").tooltip({
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-head"><h3><i class="bi-info-circle"></i> Important Info</h3></div><div class="tooltip-inner"></div>'
});
});
</script>
Ví dụ sau sẽ chèn mã HTML được tạo động của tooltip vào cuối phần tử #wrapper
thay vì phần tử mặc định <body>
.
<script>
$(document).ready(function(){
// Append tooltip HTML to wrapper element
$("#myTooltip").tooltip({
container: "#wrapper"
});
});
</script>
Lưu ý: Việc ghi đè giá trị tùy chọn mặc định container
của tooltip không tạo ra bất kỳ sự khác biệt rõ ràng nào trên trang. Để xem kết quả thực tế, bạn cần kiểm tra DOM. Nhấn Ctrl + Shift + I (Windows / Linux) hoặc Cmd + Opt + I (Mac) để mở Công cụ dành cho nhà phát triển hoặc Trình kiểm tra DOM.
Tương tự, bạn có thể đặt các tùy chọn khác cho tooltip. Hãy xem các phương thức khác của plugin Bootstrap tooltip.
Phương thức này hiển thị tooltip của phần tử. Đây được coi là cách kích hoạt tooltip "thủ công".
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myTooltip").tooltip("show");
});
});
</script>
Phương thức này ẩn tooltip của phần tử. Đây được coi là cách kích hoạt tooltip "thủ công".
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myTooltip").tooltip("hide");
});
});
</script>
Phương thức này chuyển đổi trạng thái tooltip của một phần tử. Đây được coi là cách kích hoạt tooltip "thủ công".
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myTooltip").tooltip("toggle");
});
});
</script>
Phương thức này ẩn và hủy tooltip của phần tử (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM).
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myTooltip").tooltip("dispose");
});
});
</script>
Phương pháp này cung cấp cho tooltip của một phần tử khả năng được hiển thị. Tooltip được bật theo mặc định.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myTooltip").tooltip("enable");
});
});
</script>
Phương pháp này loại bỏ khả năng hiển thị tooltip của phần tử. Tooltip sẽ chỉ có thể được hiển thị nếu nó được bật lại.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myTooltip").tooltip("disable");
});
});
</script>
Phương thức này chuyển đổi khả năng hiển thị hoặc ẩn tooltip của một phần tử.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myTooltip").tooltip("toggleEnabled");
});
});
</script>
Phương thức này cập nhật vị trí tooltip của phần tử.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myTooltip").tooltip("update");
});
});
</script>
Đây là một phương thức tĩnh cho phép bạn lấy instance của tooltip được liên kết với một phần tử DOM.
<script>
$(document).ready(function(){
// Trigger the tooltip
$("#myTooltip").tooltip();
// Get tooltip instance on button click
$("#myBtn").click(function(){
var myTooltip = bootstrap.Tooltip.getInstance($("#myTooltip")[0]);
console.log(myTooltip);
// {_element: a#myTooltip, _isEnabled: true, _timeout: 0, _hoverState: "", _activeTrigger: {…}, …}
});
});
</script>
Đây là một phương thức tĩnh cho phép bạn lấy instance của tooltip được liên kết với phần tử DOM hoặc tạo một instance mới trong trường hợp tooltip không được khởi chạy.
<script>
$(document).ready(function(){
// Get or create tooltip instance on button click
$("#myBtn").click(function(){
var myTooltip = bootstrap.Tooltip.getOrCreateInstance($("#myTooltip")[0]);
console.log(myTooltip);
// {_element: a#myTooltip, _isEnabled: true, _timeout: 0, _hoverState: "", _activeTrigger: {…}, …}
});
});
</script>
Lớp tooltip của Bootstrap bao gồm một số sự kiện để kết nối với chức năng tooltip.
Sự kiện | Mô tả |
---|---|
show.bs.tooltip | Sự kiện này kích hoạt ngay lập tức khi phương thức show được gọi. |
shown.bs.tooltip | Sự kiện này được kích hoạt khi tooltip được hiển thị cho người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt. |
hide.bs.tooltip | Sự kiện này được kích hoạt ngay lập tức khi phương thức hide thể hiện đã được gọi. |
hidden.bs.tooltip | Sự kiện này được kích hoạt khi tooltip bị ẩn khỏi người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt. |
inserted.bs.tooltip | Sự kiện này được kích hoạt sau sự kiện show.bs.tooltip khi mẫu tooltip đã được thêm vào DOM. |
Ví dụ sau sẽ hiển thị một thông báo cảnh báo cho người dùng khi quá trình chuyển đổi dần dần của tooltip đã hoàn tất.
<script>
$(document).ready(function(){
$("#myTooltip").on("hidden.bs.tooltip", function(){
alert("Tooltip has been completely closed.");
});
});
</script>
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.