Để tiếp tục quá trình học bootsrap, chúng ta cùng đi tìm hiểu cách tạo Tooltip bằng Bootstrap nhé.Tooltip bằng Bootstrap nhé.
1. Khái niệm tooltip
Tooltip là một chú thích xuất hiện khi rê chuột lên 1 đối tượng nào đó như văn bản, hình ảnh, liên kết và các phần tử giao diện khác. Nội dung trong tooltip có thể là văn bản, hình ảnh hoặc thông tin nào đó. Mục đích của tooltip là nói cho người dùng biết đối tượng này dùng để làm gì hoặc hiển thị thêm thông tin của đối tượng được rê chuột vào. Chúng ra rất dễ dàng thấy ứng dụng này trên các site thương mại điện tử. Tooltip thường hiển thị thêm các thông tin về hình ảnh, thông số kỹ thuật, giá cả của sản phẩm mà bạn đang xem. Ưu điểm lớn nhất của tooltip không chỉ là hiển thị được thêm nhiều thông tin của đối tượng mà còn tiết kiệm được diện tích trên giao diện. Chúng ta hãy cùng đi tìm hiểu cách tạo tooltip nào.
2. Cách tạo tooltip
Tạo tooltip bằng bootstrap cực kỳ đơn giản. Bạn chỉ cần thêm thuộc tính data-toggle=”tooltip” vào 1 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. Bên cạnh đó, 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 như đoạn mã ở dưới.data-toggle=”tooltip” vào 1 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. Bên cạnh đó, 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 như đoạn mã ở dưới.
Tạo Tooltip bằng bootstrap
Rê chuột lên liên kết!
$[document].ready[function[]{
$['[data-toggle="tooltip"]'].tooltip[];
}];
Kết quả hiển thị:
Tooltip ở bên trên