Bài 24: Tooltip trong Bootstrap 4

0
520

Xin chào các bạn, hôm nay chúng ta lại trở lại với series học Bootstrap 4 với bài học về cách tạo Tooltip trên website nhé.

Tooltip trong Bootstrap 4 là gì?

Tooltip là thành phần hiển thị dưới dạng 1 hộp popup nhỏ, nó xuất hiện khi người dùng trỏ chuột, hover vào phần tử.

Cách tạo Tooltip trong Bootstrap 4

Để tạo 1 tooltip, các bạn thêm thuộc tính data-toggle="tooltip" vào đối tượng cần hiển thị hộp thoại tooltip.

Ví dụ với thẻ <a> như sau:

Nội dung của tooltip sẽ nằm trong thuộc tính title của thành phần, như ví dụ trên nội dung khi hover vào là “Hooray”.

Lưu ý: Tooltip phải được khởi tạo với cú pháp khai báo trong jQuery, sau đó chọn phần tử được chỉ định và gọi phương thức tooltip(). Ví dụ:

Kết quả Tooltip hiển thị:

Định vị vị trí hiển thị của các Tooltip

Theo mặc định, tooltip sẽ hiển thị ở dưới của thành phần. Vậy nếu như muốn Tooltip xuất hiện ở các vị trí khác mà bạn mong muốn như trên, phải hay trái thì Bootstrap 4 cung cấp cho chúng ta thuộc tính data-placement, giá trị là các vị trí định vị:

  • top
  • left
  • right
  • bottom

Ví dụ:

Hiển thị kết quả:

Kết luận

OK, như vậy là xong về Tooltip trong Bootstrap 4 rồi. Có thể trước khi đọc bài viết này, các bạn sẽ rất khó để làm được các định dạng Tooltip, và phải mất công tìm hiểu Javascript cũng như jQuery thì mới làm được, giờ Bootstrap 4 đã hỗ trợ hết rồi, rất tuyệt vời đúng không nào.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây