Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Component Tooltips Và Popovers Trong Bootstrap (Phần 11)

Component Tooltips Và Popovers Trong Bootstrap (Phần 11)


Ngày 3 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về các component tooltips và popovers trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Component Tooltips:

Tooltip là một đoạn chữ nhỏ được xuất hiện khi người dùng đưa chuột lên (hover) các đối tượng trong HTMl như là thẻ a, button... để cung cấp chỉ dẫn hay thông tin thêm về đối tượng được hover. Nó sẽ rất hữu ích đối với những người dùng mới khi vào trang web của bạn vì tooltip sẽ cung cấp thông tin hay mục đích sử dụng của các biểu tượng và liên kết bằng cách hover chúng.

Để tạo component này thì bước đầu tiên mình cần thêm thuộc tính data-toggle="tooltip" và thuộc tính title giúp chúng ta xác định chữ sẽ hiện bên trong tooltip (thông tin thêm, chỉ dẫn...) vào đối tượng HTML. Để dễ hình dung bạn xem đoạn code dưới đây nhé:

HTML

<a href="#" data-toggle="tooltip" id="tooltip_vi_du" title="Nội dung">Hover Vào Liên Kết</a>

Bước thứ hai là nếu muốn tooltip hoạt động thì chúng ta bắt buộc phải thiết lập với Jquery bằng cách gọi đối tượng theo id, class hay là thuộc tính... mà bạn muốn hiển thị và gọi hàm tooltip() cho nó. Để dễ hình dung bạn xem đoạn code Jquery dưới đây nhé:

JS

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

Ở trên là mình sẽ thực hiện hàm tooltip cho tất cả đối tượng HTML mà có thuộc tính data-toggle="tooltip". Bước tiếp theo chúng ta sẽ kết hợp hai đoạn code trên để tạo ra component tooltip. Để nắm rõ hơn bạn xem ví dụ dưới đây nhé:

Component Tooltip:

See the Pen component tooltip by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tiếp theo mình sẽ chỉ bạn cách điều chỉnh vị trí của Tooltip như hiển thị bên trái, bên phải, ở trên hay là ở dưới bằng thuộc tính data-placement=(position) với position là các hướng mặc định của Bootstrap như là left, right, top và bottom. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Vị trí Tooltip:

See the Pen position Tooltip by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nãy giờ ở các vị trên thì chúng ta chỉ mới hiển thị một đoạn chữ cơ bản, tiếp theo mình sẽ đi vào cách chèn icon hay hình ảnh vào một component tooltip bằng cách sử dụng Jquery. Để nắm rõ hơn bạn xem ví dụ dưới đây nhé:

Thêm hình ảnh vào Tooltip:

See the Pen Add image in tooltip by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cuối cùng trong component này mình muốn giới thiệu về thời gian sẽ xuất hiện của tooltip khi người dùng hover vào đối tượng HTML (thường được gọi là delay). Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Thuộc tính delay trong Tooltip:

See the Pen delay tooltip by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở đây mình sử dùng thuộc tính delay: {show: 2000, hide:500} để xác định khi người dùng hover vào đối tượng thì sau 2s nó sẽ hiện bằng thuộc tính show: 2000 và khi người dùng di chuyển chuột ra khỏi đối tượng thì tooltip sẽ ẩn đi sau 0.5s bằng thuộc tính hide:500.

Component Popovers:

Thực ra Popovers cũng giống như chức năng của Tooltip nhưng chỉ sẽ hiển thị khi mà người dùng nhấn (click) vào đối tượng HTML. Để sử dụng nó bạn cần thêm file Poper.js vào trong File HTML nhé. Để xem cách chèn file này thì bạn tham khảo ở đây: Ở Phần Component Dropdown hoặc ở Bootstrap Thêm Popper.js. Ở đây chúng ta cũng sẽ có hai bước như trên:

Bước đầu tiên mình sẽ thêm các thuộc tính cần thiết để gọi component Poppovers là data-toggle="popover", title="Tiêu Đề" để xác định tiêu đề của Popover, data-content="Nội Dung" xác định nội dung của Popover. Để nắm rõ hơn bạn xem đoạn code dưới đây nhé:

HTML:

<a class="btn btn-primary" href="#" data-toggle="popover" title="Tiêu Đề" data-content="Nội Dung">Hiển thị popover</a>

Bước thứ hai là nếu muốn popover hoạt động thì chúng ta bắt buộc phải thiết lập với Jquery bằng cách gọi đối tượng theo id, class hay là thuộc tính... mà bạn muốn hiển thị và gọi hàm popover() cho nó. Để dễ hình dung bạn xem đoạn code Jquery dưới đây nhé:

JS:

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>

Ở trên là mình sẽ thực hiện hàm popover cho tất cả đối tượng HTML mà có thuộc tính data-toggle="popover". Bước tiếp theo chúng ta sẽ kết hợp hai đoạn code trên để tạo ra component popover. Để nắm rõ hơn bạn xem ví dụ dưới đây nhé:

Component Popover:

See the Pen popover by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tiếp theo mình sẽ chỉ bạn cách điều chỉnh vị trí của Popover như hiển thị bên trái, bên phải, ở trên hay là ở dưới bằng thuộc tính data-placement=(position) với position là các hướng mặc định của Bootstrap như là left, right, top và bottom. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Vị trí Popover:

See the Pen position of popovers by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem được kết quả bạn chuyển sang chế độ screen 0.5x, 0.25x nhé. Như ví dụ trên thì chúng ta sẽ gặp một vấn đề là khi người dùng nhấn vào 4 popover thì nó sẽ hiện hết cả 4, nhiều khi như vậy sẽ làm người dùng khó chịu vì khi muốn ẩn popover thì họ phải nhấn lại thêm một lần nữa vào các popover muốn ẩn. Để tránh tình trạng đó thì mình sẽ sử dụng thuộc tính data-trigger="focus" có nhiệm vụ sẽ tự động ẩn popover khi người dùng nhấn vào popover tiếp theo. Để hiễu rõ hơn bạn hãy xem ví dụ dưới đây nhé:

Thuộc tính data-trigger="focus" trong Popover:

See the Pen data-trigger="focus" Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bây giờ mình sẽ giới thiệu cách đưa nội dung, hình ảnh, icon... vào trong Popover bằng Jquery. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

See the Pen Add content and image Popover by haycuoilennao19 (@haycuoilennao19) on CodePen.

Chúng ta cũng có thể thiết lập thời gian delay cho component Popover như Tooltip bằng cách sử dụng thuộc tính delay. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Delay trong Popover:

See the Pen Delay in Popover by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở đây mình sử dùng thuộc tính delay: {show: 2000, hide:500} để xác định khi người dùng nhấn (click) vào đối tượng thì sau 2s nó sẽ hiện bằng thuộc tính show: 2000 và khi người dùng nhấn (click) đối tượng lần nữa thì tooltip sẽ ẩn đi sau 0.5s bằng thuộc tính hide:500.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các bạn nắm được thêm các component trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.