Bootstrap 4 - Bootstrap Tooltips
Tạo Tooltip bằng Bootstrap
Tooltip thường được sử dụng để làm xuất hiện một hộp nhỏ khi di chuột qua văn bản hoặc hình ảnh nào đó với thông tin liên quan đến thành phần được chuột di qua. Xét về mặt trải nghiệm người dùng, các tooltip cung cấp cho người dùng nguồn thông tin một cách nhanh chóng và dễ dàng nhất mà không phải nhấp vào bất kỳ thứ gì.
Bước 1: Thêm thuộc tính cho Tooltip
Tạo tooltip bằng bootstrap cực kỳ đơn giản. Bạn chỉ cần 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.
Cú pháp: Thêm thuộc tính Tooltip cho hyperlink:
<a href="#" data-toggle="tooltip" title="Some text">Hover over me</a>
Tương tự, bạn cũng có thể thêm Tooltip cho các đối tượng khác:buttons, icons,...
Bước 2: Thêm Javacript cho Tooltips
Bên cạnh đó, 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.
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Ví dụ:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<ul class="list-inline">
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" title="Default tooltip">Tooltip</a>
</li>
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" title="Another tooltip">Another tooltip</a>
</li>
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" title="A much longer tooltip to demonstrate the max-width of the Bootstrap tooltip.">Large tooltip</a>
</li>
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" title="The last tip!">Last tooltip</a>
</li>
</ul>
Vị trí tooltip
Theo mặc định, tooltip sẽ hiển thị trên cùng (top) của 1 phần tử. Tuy nhiên, trong nhiều trường hợp, không phải lúc nào bạn cũng có thể hiển thị tooltip ở vị trí top được. Vậy nếu muốn hiển thị tooltip ở các vị trí khác thì phải làm thế nào? Câu trả lời là: 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 ở bên trên:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<div style="margin:100px">
<a href="#" data-toggle="tooltip" data-placement="top" title="Default tooltip">Tooltip</a>
</div>
Tooltip ở bên dưới
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<div style="margin:100px">
<a href="#" data-toggle="tooltip" data-placement="bottom" title="A much longer tooltip to demonstrate the max-width of the Bootstrp tooltip.">Large tooltip</a>
</div>
Tooltip ở bên trái
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<div style="margin:100px">
<a href="#" data-toggle="tooltip" data-placement="left" title="The last tip!">Last tooltip</a>
</div>
Tooltip ở bên phải
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<div style="margin:100px">
<a href="#" data-toggle="tooltip" data-placement="right" title="Another tooltip">Another tooltip</a>
</div>
Sử dụng Javacript để định vị trí Tooptips
Ví dụ sau đây sẽ chỉ cho bạn cách định vị trí Tooltips dùng JavaScript.
<script>
$(document).ready(function(){
$(".tip-top").tooltip({
placement : 'top'
});
$(".tip-right").tooltip({
placement : 'right'
});
$(".tip-bottom").tooltip({
placement : 'bottom'
});
$(".tip-left").tooltip({
placement : 'left'
});
});
</script>
<div style="margin:100px">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" class="tip-top" title="Default tooltip">Tooltip</a>
</li>
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" class="tip-right" title="Another tooltip">Another tooltip</a>
</li>
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" class="tip-bottom" title="A much longer tooltip to demonstrate the max-width of the Bootstrap tooltip.">Large tooltip</a>
</li>
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" class="tip-left" title="The last tip!">Last tooltip</a>
</li>
</ul>
</div>