Hướng dẫn tooltip bootstrap 3 codepen - tooltip bootstrap 3 codepen
|
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é! 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. 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 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 Ở 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 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 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 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: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à HTML: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:Ở 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 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 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 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 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ẻ! |
