Tooltip là một thông điệp hay chú giải xuất hiện khi người sử 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ử khác trên giao diện web. Trong bài học này chúng ta sẽ tìm hiểu về Tooltip trong Bootstrap 4 các bạn nhé.
Cách tạo Tooltip trong Bootstrap 4
Để tạo Tooltip , hãy thêm thuộc tính data-toggle = "tooltip" vào một phần tử.
Sử dụng thuộc tính title để chỉ định văn bản sẽ được hiển thị bên trong chú giải.
Lưu ý: Chú giải công cụ phải được khởi tạo bằng jQuery: chọn phần tử được chỉ định và gọi phương thức tooltip().
Đoạn mã sau sẽ kích hoạt tất cả các chú giải công cụ trong tài liệu:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>Ví dụ Tooltip trong Bootstrap 4
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Ví dụ Tooltip</h3>
<a href="#" data-toggle="tooltip" title="HocTV xin chao cac ban!">Di chuột vào tôi</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Định vị vị trí Tooltip
Theo mặc định, Tooltip sẽ xuất hiện trên đầu phần tử.
Sử dụng data-placement để đặt vị trí của chú giải:
- data-placement="top" : Đặt tooltip ở trên cùng
- data-placement="bottom" : Đặt tooltip ở dưới cùng
- data-placement="left" : Đặt tooltip ở bên trái
- data-placement="right" : Đặt tooltip ở bên phải
Ví dụ :
<a href="#" data-toggle="tooltip" data-placement="top" title="HocTV xin chao cac ban!">Di chuột vào tôi</a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="HocTV xin chao cac ban!">Di chuột vào tôi</a> <a href="#" data-toggle="tooltip" data-placement="left"title="HocTV xin chao cac ban!">Di chuột vào tôi</a> <a href="#" data-toggle="tooltip"data-placement="right" title="HocTV xin chao cac ban!">Di chuột vào tôi</a>
Lời kết:
Vậy là chúng ta đã tìm hiểu xong cách sử dụng tooltip trong Bootstrap 4 rồi đấy, tooltip rất có lợi khi bạn muốn chú giải 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. Cảm ơn các bạn đã theo dõi bài viết.
