Tooltip trong Bootstrap 4

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.

Bình luận