Tooltip trong Bootstrap 3

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.