Một thành phần được gọi là Tooltip được dùng để thêm thông tin vào khi người sử dụng di chuột vào một đối tượng trên trang web. Nó được cho là hữu ích cho những người mới sử dụng trang web để họ có thể dễ dàng hiểu các chức năng thông qua thông tin bổ sung. Thông thường, nó sẽ được hiển thị như thuộc tính title trong thẻ a, tuy nhiên, với thư viện Tooltip, bạn có thể thiết kế một Tooltip đẹp mắt và thêm nhiều chức năng hơn cho trang web của mình. Để hiểu rõ hơn, hãy xem ví dụ sau đây.
Bạn Đang Xem: Tooltip Là Gì? 20 Ví Dụ Tooltip CSS Javascript Cho Website
Xin mời xem kết quả ở dưới đây!
Xem bút Fancy & Animated Tooltip (chỉ sử dụng CSS) của Reinhard Schnetzinger trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem bút CSS ToolTip với hiệu ứng mượt mà của Omar Dsooky (@linux) trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem công cụ Tooltiper của Thomas Podgrodzki (@Podgro) trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem cách sử dụng thuộc tính dữ liệu đơn giản để tạo các gợi ý tự động trên CodePen của Adwin.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem bút chì 012 – Chú giải của Matthias Martin (@roydigerhund) trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem Button được hoạt hóa với Tooltip (CSS thuần) của Aditya Bhandari (@takeradi) trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem bút chì Gợi ý thuần túy CSS của Cristina Silva (@cristina-silva) trên CodePen.
Nguồn………………..
Xem Thêm : Đời sống tinh thần là gì? Cách để nâng cao đời sống tinh thần
Xin mời xem kết quả ở dưới đây!
Xem bút chì Tooltipster đẹp trên CodePen của Ms Moneypenny (@Moneypenny).
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem ví dụ về khái niệm Tooltip CSS được tạo động bởi Sasha (@sashatran) trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem Pen của Samuel Janes trên CodePen để xem những gợi ý chỉ dùng CSS.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem bút Pure-CSS Tooltips của Domainente trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem công cụ Tooltips của elhombretecla trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem Pen chú giải CSS3 nhanh (Không có hình ảnh, không có js) của deineko trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem Pen Biểu tượng mạng xã hội với gợi ý nhãn bởi Jon Milner (@jonmilner) trên CodePen.
Nguồn………………..
Xem Thêm : Ref là gì? Ý nghĩa của từ Ref trong những lĩnh vực khác nhau
Xin mời xem kết quả ở dưới đây!
Xem Pen Tooltip sử dụng chỉ CSS + thuộc tính CSS chữ cái đầu tiên của Leandro Fialho (@lefialho) trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem Pen Mẹo nhỏ dễ hiểu sử dụng thuộc tính Data-Description của Jesse Couch (@designcouch) trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem bút Tooltip Phân trang của Joe (@dope) trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem cái bút Chú thích nhỏ đáng yêu của Andrej Sharapov trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem đoạn mã Tooltip animation của Milan Raring trên CodePen.
Nguồn………………..
Xin mời xem kết quả ở dưới đây!
Xem Bubble Point Tooltips của Chris Coyier (@chriscoyier) trên CodePen.
Nguồn………………..
Nếu bạn cần tham khảo về các thư viện tạo Tooltip, hãy truy cập vào đường link ở dưới đây!
Thư Viện Gợi Ý.
Nếu bạn muốn tìm hiểu về cách tạo Tooltip Boostrap. thì có thể truy cập đường link bên dưới!
Tooltip Boostrap.
Tổng kết:
Tôi hy vọng bài viết này sẽ cung cấp cho bạn thêm các ví dụ về các công cụ gợi ý hữu ích cho việc thiết kế và phát triển trang web. Nếu bạn có bất kỳ câu hỏi nào, vui lòng gửi email cho tôi và tôi sẽ trả lời nhanh nhất có thể. Tôi rất mong nhận được sự hỗ trợ của bạn để có thể viết nhiều bài viết hay hơn trên trang web này. Chúc bạn có một ngày thật vui vẻ!
Nguồn: https://domainente.com
Danh mục: Chia sẻ
