Chú giải công cụ tùy chỉnh (css 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é

Chú giải công cụ thành phần

Chú giải công cụ là một đoạn chữ nhỏ được xuất hiện khi người dùng đưa chuột lên (di chuột) các đối tượng trong HTMl như thẻ a, nút. để cung cấp chỉ đường dẫn hoặc thông tin bổ sung về đối tượng được di chuột. 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 hoặc mục đích sử dụng của các biểu tượng và liên kết bằng cách di chuột qua chúng

Để tạo thành phần này thì bước đầu tiên mình cần thêm thuộc tính

3 và thuộc tính

4 giúp chúng tôi xác định chữ sẽ hiển thị bên trong chú giải công cụ (thông tin bổ sung, chỉ dẫn. ) vào đối tượng HTML. Để dễ hình dung các bạn xem đoạn mã dưới đây nhé

HTML

Hover Vào Liên Kết

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 các đối tượng theo id, class hoặc thuộc tính. mà bạn muốn hiển thị và gọi hàm

5 cho nó. Để dễ hình dung các bạn xem đoạn mã Jquery dưới đây nhé

JS

Ở trên là mình sẽ thực hiện tooltip chức năng cho tất cả các đối tượng HTML mà có thuộc tính

3. Bước tiếp theo chúng ta sẽ kết hợp hai đoạn mã trên để tạo tooltip thành phần. Để biết rõ hơn bạn xem ví dụ dưới đây nhé

Chú giải công cụ thành phần

Xem chú giải công cụ thành phần Bút của haycuoilennao19 (@haycuoilennao19) trên CodePen

Tiếp theo mình sẽ chỉ cho 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 ở dưới bằng thuộc tính

7 với vị trí là các hướng mặc định của Bootstrap như trái, phải, trên và dưới. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé

Tooltip Location

Xem Chú giải công cụ vị trí bút của haycuoilennao19 (@haycuoilennao19) trên CodePen

Bây giờ ở các vị trí trên thì chúng ta 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 biểu tượng hoặc hình ảnh vào chú giải công cụ thành phần bằng cách sử dụng Jquery. Để biết rõ hơn bạn xem ví dụ dưới đây nhé

Add image to Tooltip

Xem hình ảnh Thêm bút trong tooltip của haycuoilennao19 (@haycuoilennao19) trên CodePen

Cuối cùng trong thành phần này mình muốn giới thiệu về thời gian sẽ xuất hiện của chú giải công cụ khi người dùng di chuột vào đối tượng HTML (thường được gọi là độ trễ). Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé

Thuộc tính trì hoãn trong Tooltip

Xem chú giải công cụ trì hoãn Bút của haycuoilennao19 (@haycuoilennao19) trên CodePen

Ở đây mình sử dụng thuộc tính

8 để xác định khi người dùng di chuột vào đối tượng thì sau 2 giây nó sẽ hiển thị bằng thuộc tính

0 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

1

Cửa sổ bật lên thành phần

Thực hiện Popovers cũng giống như chức năng của Tooltip nhưng sẽ chỉ hiển thị khi người dùng nhấn (nhấp) vào đối tượng HTML. Để sử dụng nó, bạn cần thêm tệp Poper. js vào trong File HTML nhé. Để xem cách chèn file này, bạn tham khảo tài liệu tại đây. Tại Phần thả xuống Thành phần hoặc tại 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ẽ bổ sung các thuộc tính cần thiết để gọi thành phần Poppovers là

2,

3 để xác định tiêu đề của Popover,

4 xác định nội dung của Popover. Để biết mã xác định hơn là bạn xem đoạn mã dưới đây nhé

HTML

Hiển thị popover

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

JS

________số 8

Ở trên là mình sẽ thực hiện chức năng popover cho tất cả các đối tượng HTML mà có thuộc tính

2. Bước tiếp theo chúng ta sẽ kết hợp hai đoạn mã trên để tạo popover thành phần. Để biết rõ hơn bạn xem ví dụ dưới đây nhé

Cửa sổ bật lên thành phần

Xem Pen popover của haycuoilennao19 (@haycuoilennao19) trên CodePen

Tiếp theo mình sẽ chỉ cho 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 ở dưới bằng thuộc tính

7 với vị trí là các hướng mặc định của Bootstrap như trái, phải, trên cùng và dưới cùng. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé

Popover Vị trí

Xem vị trí Pen của popover bởi haycuoilennao19 (@haycuoilennao19) trên CodePen

Để xem kết quả bạn chuyển sang chế độ màn hình 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 thị hết cả 4, nhiều khi như vậy sẽ khiến người dùng khó chịu vì muốn ẩn popover thì họ phải nhấn lại thêm một lần nữa . Để tránh tình trạng đó, mình sẽ sử dụng thuộc tính

7 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

Xem Pen data-trigger="focus" Bootstrap của haycuoilennao19 (@haycuoilennao19) trên CodePen

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

Xem Bút Thêm nội dung và hình ảnh Popover của haycuoilennao19 (@haycuoilennao19) trên CodePen

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

Trì hoãn trong Popover

Xem Độ trễ của bút trong Popover của haycuoilennao19 (@haycuoilennao19) trên CodePen

Ở đây mình sử dụng thuộc tính

8 để xác định khi người dùng nhấn (nhấp) vào đối tượng thì sau 2 giây nó sẽ hiển thị bằng thuộc tính

0 và khi người dùng nhấn (nhấp) vào đối tượng một lần nữa thì tooltip sẽ ẩn đi sau 0. 5s bằng thuộc tính

1

Tổng kết

Qua đây mình mong bài viết sẽ giúp các bạn bổ sung thêm các thành phần 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ẻ