Bài 7 – Tạo Tooltip bằng Bootstrap

Để tiếp tục quá trình học bootstrap, chúng ta cùng tìm hiểu cách tạo Chú giải công cụ bằng Bootstrap.

1. Khái niệm chú giải công cụ

Chú giải công cụ là một dạng thông báo xuất hiện khi di chuột lên một đối tượng 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 chú giải công cụ có thể là văn bản, hình ảnh hoặc thông tin khác. Mục đích của chú giải công cụ là giúp người dùng hiểu rõ hơn về đối tượng đó hoặc hiển thị thêm thông tin khi di chuột vào. Chúng ta thường thấy ứng dụng này trên các trang web thương mại điện tử. Chú giải công cụ thường hiển thị thông tin về hình ảnh, thông số kỹ thuật, giá cả của sản phẩm. Ưu điểm lớn nhất của chú giải công cụ không chỉ là hiển thị nhiều thông tin mà còn tiết kiệm diện tích trên giao diện. Hãy tìm hiểu cách tạo chú giải công cụ nhé.

2. Cách tạo chú giải công cụ

Việc tạo chú giải công cụ bằng bootstrap rất đơn giản. Bạn chỉ cần thêm thuộc tính data-toggle=”tooltip” vào một phần tử bất kỳ, sử dụng thuộc tính title để định nghĩa nội dung chú giải công cụ. Bên cạnh đó, bạn cần phải thêm đoạn mã JavaScript để gọi phương thức tooltip() từ thư viện JQuery như sau.

Có Thể Bạn Quan Tâm :   Đĩa cứng là gì? Đĩa cứng là thiết bị lưu trữ trong hay ngoài?

<div id=”main”> <div class=”container”> <h1 class=”title-page”>Tạo Chú giải công cụ bằng bootstrap </h1> <a href=”#” data-toggle=”tooltip” title=”Tạo chú giải công cụ thành công!”>Di chuột lên liên kết!</a> </div> </div> <script> $(document).ready(function(){ $(‘[data-toggle=”tooltip”]’).tooltip(); }); </script>

Kết quả sẽ hiển thị như sau:

Bài 7 - Tạo Chú giải công cụ bằng Bootstrap

Như vậy, bạn đã hoàn thành việc tạo chú giải công cụ. Rất đơn giản và dễ dàng, phải không?

3. Vị trí chú giải công cụ

Mặc định, chú giải công cụ sẽ hiển thị ở trên cùng (top) của một phần tử. Tuy nhiên, trong nhiều trường hợp, không phải lúc nào bạn cũng muốn hiển thị chú giải công cụ ở vị trí top. Vậy nếu muốn hiển thị chú giải công cụ ở các vị trí khác, bạn phải làm thế nào? Câu trả lời là: bạn có thể sử dụng thuộc tính data-placement để thiết lập vị trí hiển thị chú giải công cụ ở trên, dưới, trái hoặc phải của một phần tử.

– Chú giải công cụ ở phía trên

Có Thể Bạn Quan Tâm :   Hoàn lưu bão là gì? Mức độ tàn phá nghiêm trọng sau bão

<div id=”main”> <div class=”container”> <h1 class=”title-page”>Tạo Chú giải công cụ bằng bootstrap </h1> <a href=”#” data-toggle=”tooltip” data-placement=”top” title=”Tạo chú giải công cụ ở phía trên thành công!”>Chú giải công cụ ở phía trên</a> </div> </div>

Bài 7 - Tạo Chú giải công cụ bằng Bootstrap

– Chú giải công cụ ở phía dưới

<div id=”main”> <div class=”container”> <h1 class=”title-page”>Tạo Chú giải công cụ bằng bootstrap </h1> <a href=”#” data-toggle=”tooltip” data-placement=”bottom” title=”Tạo chú giải công cụ ở phía dưới thành công!”>Chú giải công cụ ở phía dưới</a> </div> </div>

Bài 7 - Tạo Chú giải công cụ bằng Bootstrap

– Chú giải công cụ ở phía trái

<div id=”main”> <div class=”container”> <h1 class=”title-page”>Tạo Chú giải công cụ bằng bootstrap </h1> <a href=”#” data-toggle=”tooltip” data-placement=”left” title=”Tạo chú giải công cụ ở phía trái thành công!”>Chú giải công cụ ở phía trái</a> </div> </div>

Bài 7 - Tạo Chú giải công cụ bằng Bootstrap

– Chú giải công cụ ở phía phải

<div id=”main”> <div class=”container”> <h1 class=”title-page”>Tạo Chú giải công cụ bằng bootstrap </h1> <a href=”#” data-toggle=”tooltip” data-placement=”right” title=”Tạo chú giải công cụ ở phía phải thành công!”>Chú giải công cụ ở phía phải</a> </div> </div>

Bài 7 - Tạo Chú giải công cụ bằng Bootstrap

– Chú giải công cụ ở vị trí tự động

Nếu bạn không muốn chú giải công cụ được cố định ở một vị trí cụ thể, bạn có thể sử dụng giá trị data-placement = “auto”, khi đó trình duyệt sẽ tự quyết định vị trí hiển thị chú giải công cụ phù hợp.

4. Chú giải công cụ với mã HTML

Như đã giới thiệu, chú giải công cụ không chỉ là văn bản đơn thuần, nó còn có thể bao gồm thông tin khác như hình ảnh, liên kết. Vậy để thêm hình ảnh vào trong chú giải công cụ hoặc tùy chỉnh css cho các đoạn văn bản trong chú giải công cụ, bạn có thể làm như sau: đơn giản, bạn chỉ cần thêm thuộc tính data-html=”true” để sử dụng các thẻ trong title của chú giải công cụ. Hãy xem ví dụ chi tiết dưới đây:

Có Thể Bạn Quan Tâm :   Thặng dư thương mại là gì? Đặc điểm, vai trò và công thức tính

<div id=”main”> <div class=”container”> <h1 class=”title-page”>Tạo Chú giải công cụ với HTML </h1> <a href=”#” data-toggle=”tooltip” data-html=”true” title=”<b><i>Văn bản in đậm và in nghiêng</i></b>”> Chú giải công cụ chứa mã HTML </a> </div> </div>

Bài 7 - Tạo Chú giải công cụ bằng Bootstrap

– Chú giải công cụ chứa hình ảnh

<div id=”main”> <div class=”container”> <h1 class=”title-page”>Tạo Chú giải công cụ với HTML </h1> <a href=”#” data-toggle=”tooltip” data-html=”true” title=”<image width=’40px’ height=’40px’ src=’../media/products/17.png’ /> <b>Chú giải công cụ chứa hình ảnh</b>”> Chú giải công cụ chứa hình ảnh </a> </div> </div>

5. Kết luận

Qua bài viết này, chúng ta đã học cách tạo và sử dụng Chú giải công cụ bằng bootstrap. Chúng ta đã hiểu thêm một plugin rất tiện lợi của bootstrap. Hẹn gặp lại các bạn trong những bài viết tiếp theo.

Back to top button