Bootstrap Tooltip

Trong hướng dẫn này, bạn sẽ học cách tạo tooltip với Bootstrap.

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.

Bước 1: Thêm mã cho tooltip

Để 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.

Bước 2: Bật tooltip

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:

Tạo Tooltip với Bootstrap
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ặc disabled 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ụng white-space: nowrap; trên các siêu liên kết đó để tránh hành vi này.

Thiết lập vị trí của tooltip

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ử.

Định vị tooltip qua thuộc tính data

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>

Định vị tooltip qua JavaScript

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ác tùy chọn của Bootstrap Tooltip

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 container: 'body' để tránh các sự cố hiển thị trong các thành phần phức tạp hơn (như group input, group button, v.v.)

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à: delay: { "show": 500, "hide": 100 }

html boolean false

Chèn HTML vào tooltip.

Nếu true, các thẻ HTML trong title của tooltip sẽ được hiển thị trong tooltip. Nếu false, thuộc tính innerText sẽ được sử dụng để chèn nội dung vào DOM.

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ị auto được chỉ định, nó sẽ tự động định hướng lại tooltip.

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.

title của tooltip sẽ được chèn vào phần tử .tooltip-inner.

Phần tử .tooltip-arrow sẽ trở thành mũi tên của tooltip.

Phần tử bao bọc ngoài cùng phải có lớp .tooltip.

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ị manual cho biết rằng tooltip sẽ được kích hoạt thông qua các phương thức .show(), .hide().toggle(); giá trị này không thể được kết hợp với bất kỳ trình kích hoạt nào khác.

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ư: 'class1 class2'.

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''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.

Các phương thức của Bootstrap Tooltip

Đây là các phương thức chuẩn của Bootstrap Tooltip:

Cách truyền các tùy chọn cho 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.

show

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>

hide

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>

toggle

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>

dispose

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>

enable

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>

disable

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>

toggleEnabled

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>

update

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>

getInstance

Đâ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>

getOrCreateInstance

Đâ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>

Các sự kiện của Bootstrap Tooltip

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>
BootstrapBootstrap Nâng Cao
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

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.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

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.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.