FullStack Academy

Tooltip trong Bootstrap 4

Chào các bạn, trong bài này chúng ta sẽ học về Tooltip, một thành phần cũng rất thường thấy ở trong các website thực tế. Vậy để hiểu được Tooltip là gì, chúng ta hãy cùng tìm hiểu 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.
VD:
<a href="#" data-toggle="tooltip" title="Hooray!"> Hover Here </a>
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ụ:



 

Cài đặt 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ụ:



 

Kết luận

Trước đây, để làm được các hiệu ứng Tooltip như thế này, chúng ta mất rất nhiều công sức viết javascript. Tuy nhiên hiện nay, với Bootstrap đặc biệt là Bootstrap 4 thì Tooltip không còn phức tạp nữa. Hẹn các bạn trong bài viết lần sau.