[Bootstrap] Phần 25: Tooltip

236 lượt xem

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

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

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

<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“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 đó.

Bình luận Facebook

Để lại bình luận

1 Comment on "[Bootstrap] Phần 25: Tooltip"

Thông báo khi có
avatar
1000
Sắp xếp theo:   mới nhất | cũ nhất | nhiều bình chọn nhất
HoangCanh
Khách

muốn chỉnh font chữ và nền cho tooltip thì làm thế nào admin?

wpDiscuz