[Bootstrap] Phần 25: Tooltip

Chúng ta tiếp tục học Bootstrap thông qua cách tạo Tooltip, một thông điệp xuất hiện khi rê chuột lên 1 đối tượng nào đó như văn bản, hình ảnh, liên kết và các phần tử giao diện khác.

Cách tạo Tooltip
Đầu tiên, bạn có thể nhúng tập tin “tooltip.js” hoặc “bootstrap.js” hoặc “bootstrap.min.js” vào trang web để định nghĩa tooltip. Sau đó, thêm thuộc tính data-toggle=”tooltip” vào 1 phần tử bất kỳ, dùng thuộc tính title để định nghĩa văn bản cần hiển thị tooltip. Bạn cũng cần phải thêm 1 đoạn mã JavaScript để gọi phương thức tooltip() bằng thư viện JQuery như đoạn mã ở dưới.

<div class="container">
	<a href="#" data-toggle="tooltip" title="dammio.com">Rê chuột lên liên kết!</a>
</div>
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

Vị trí Tooltip
Theo mặc định, tooltip sẽ hiển thị trên cùng (top) của 1 phần tử. Bạn có thể dùng thuộc tính data-placement để thiết lập vị trí hiển thị tooltip ở top, bottom, left hay right của 1 phần tử.

<div class="container">
	<a href="#" data-toggle="tooltip" data-placement="top" title="dammio.com">Rê chuột lên liên kết!</a>
	</br>
	<a href="#" data-toggle="tooltip" data-placement="bottom" title="dammio.com">Rê chuột lên liên kết!</a>
	</br>
	<a href="#" data-toggle="tooltip" data-placement="left" title="dammio.com">Rê chuột lên liên kết!</a>
	</br>
	<a href="#" data-toggle="tooltip" data-placement="right" title="dammio.com">Rê chuột lên liên kết!</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

Tooltip với mã HTML
Bạn cũng có thể chèn nội dung mã HTML vào tooltip như ví dụ sau.

<div class="container">
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<b><i>Văn bản in đậm và in nghiêng</i></b>">
		Tooltip chứa mã HTML - dammio.com
	</button>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

Bạn có thể thiết lập giá trị data-placement là “auto”, khi đó trình duyệt sẽ quyết định nên hiển thị tooltip ở vị trí nào.

Như vậy, bài viết ngắn này đã giúp bạn sử dụng tooltip trong Bootstrap, tooltip được dùng cho các thành phần giao diện là bạn muốn thêm chú thích hoặc giải thích rõ nghĩa hơn về thành phần đó.