Trong bài học lần này chúng ta sẽ tìm hiểu về Tooltip trong Bootstrap 3 các bạn nhé. Tooltip là một thông điệp xuất hiện khi người dùng rê chuột lên 1 đối tượng nào đó như văn bản, hình ảnh, liên kết hay các phần tử giao diện khác.
Cách tạo Tooltip trong Bootstrap 3
Hãy chắc chắn rằng bạn đã nhúng “tooltip.js” hay “bootstrap.js” hoặc “bootstrap.min.js” vào trang web của mình. Tiếp theo thêm thuộc tính tính data-toggle=”tooltip” vào một 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. Đương nhiên rồi 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.
Ví dụ:
<div class="container" style="padding-top:100px;">
<a href="#" data-toggle="tooltip" title="Tooltip Bootstrap 3">Rê chuột vào đây để xem Tooltip!</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Vị trí Tooltip
Tooltip sẽ hiển thị trên cùng (top) của 1 phần tử. Chúng ta có thể dùng thuộc tính data-placement để thiết lập vị trí hiển thị tooltip ở top, bottom (dưới cùng), left (trái) hay right (phải) của 1 phần tử.
<div class="container">
<a href="#" data-toggle="tooltip" data-placement="top" title="Hoc.TV">Rê chuột lên liên kết!</a>
</br>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hoc.TV">Rê chuột lên liên kết!</a>
</br>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hoc.TV">Rê chuột lên liên kết!</a>
</br>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hoc.TV">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
Chúng ta 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 vừa in đậm vừa in nghiêng</i></b>" data-placement="right">
Tooltip chứa mã HTML - Hoc.tv
</button>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>Mẹo nhỏ chúng ta có thể để trình duyệt tự quyết định hiển thị tooltip ở vị trí nó tự chọn bằng cách thêm giá trị data-placement là “auto”
Lời kết:
Vậy là chúng ta đã tìm hiểu xong cách sử dụng tooltip trong Bootstrap 3 rồi đấy, tooltip rất có lợi khi bạn muốn chú thích cái gì đó mà không muốn làm ảnh hưởng nhiều đến giao diện web của mình.
