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:

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.

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.

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>

Bootstrap • Bootstrap Nâng Cao