Hôm nay chúng ta sẽ đi vào tìm hiểu tooltip là gì và các ví dụ minh họa tooltip được xây dựng bằng HTML CSS Javascript cho website nhé!
Tooltip Là Gì?
Tooltip là một thành phần giúp bạn chú thích thêm thông tin khi người dùng di chuột vào một đối tượng bất kỳ trong trang web. Theo mình thấy nó sẽ giúp những người mới sử dụng trang web có thể hiểu được những chức năng một cách rõ ràng thông qua những thông tin bổ sung đó. Thông thường nó sẽ hiển thị giống như thuộc tính title
trong thẻ a
nhưng với tooltip thư viện thì bạn có thể dễ dàng thiết kế một tooltip đẹp mắt và được bổ sung thêm nhiều chức năng cho trang web của mình. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé
Tạo Hiệu ứng Chuyển động Tooltip CSS
Kết quả bạn xem bên dưới nhé
Xem Pen Fancy & Animated Tooltip [Chỉ CSS] của Reinhard Schnetzinger [@reiinii1] trên CodePen
Nguồn
Tạo CSS ToolTip
Kết quả bạn xem bên dưới nhé
Xem Pen CSS ToolTip Smooth hoạt hình của Omar Dsooky [@linux] trên CodePen
Nguồn
Tạo Tooltip Jquery
Kết quả bạn xem bên dưới nhé
Xem Pen Tooltiper của Thomas Podgrodzki [@Podgro] trên CodePen
Nguồn
Tooltip Hiệu Ứng Hover Cho
Kết quả bạn xem bên dưới nhé
Xem Chú giải công cụ tự động hóa bút với các thuộc tính dữ liệu đơn giản của Adwin [@adwin] trên CodePen
Nguồn
Cách Tooltip Bằng HTML CSS
Kết quả bạn xem bên dưới nhé
Xem Bút 012 - Chú giải công cụ của Matthias Martin [@roydigerhund] trên CodePen
Nguồn
Nút Tooltip Thiết Kế
Kết quả bạn xem bên dưới nhé
Xem Pen Animated Button with Tooltip [CSS thuần túy] của Aditya Bhandari [@takeradi] trên CodePen
Nguồn
Tooltip Thiết Kế Bằng HTML5 CSS3
Kết quả bạn xem bên dưới nhé
Xem Chú giải công cụ Pen Pure CSS của Cristina Silva [@cristina-silva] trên CodePen
Nguồn
Tooltip Thiết Kế Jquery HTML
Kết quả bạn xem bên dưới nhé
Xem Pen Tooltipster thật tuyệt bởi Ms Moneypenny [@Moneypenny] trên CodePen
Nguồn
Design Tooltip Cho Ô Input
Kết quả bạn xem bên dưới nhé
Xem Khái niệm chú giải công cụ CSS hoạt hình bằng bút của Sasha [@sashatran] trên CodePen
Nguồn
Cách Tạo Tooltip Cho Button CSS
Kết quả bạn xem bên dưới nhé
Xem chú giải công cụ dành riêng cho Pen CSS của Samuel Janes [@SamuelJanes] trên CodePen
Nguồn
Cách Tạo Tooltip Cho Chữ Bằng HTML CSS
Kết quả bạn xem bên dưới nhé
Xem Chú giải công cụ Pen Pure-CSS của Pure-CSS. com [@pure-css] trên CodePen
Nguồn
Cách tạo Chú giải công cụ HTML5
Kết quả bạn xem bên dưới nhé
Xem Chú giải công cụ bút của elhombretecla [@elhombretecla] trên CodePen
Nguồn
Tooltip Thiết Kế Với CSS3
Kết quả bạn xem bên dưới nhé
Xem chú giải công cụ Pen Quick CSS3 [Không có hình ảnh, không có js] của deineko [@deineko] trên CodePen
Nguồn
Design Tooltip Cho Social Icon
Kết quả bạn xem bên dưới nhé
Xem các biểu tượng xã hội Pen với Chú giải công cụ của Jon Milner [@jonmilner] trên CodePen
Nguồn
Tạo Hiệu Ứng Hover Cho Tooltip CSS3
Kết quả bạn xem bên dưới nhé
Xem Chú giải công cụ bút chỉ sử dụng CSS + Quyền sở hữu CSS chữ cái đầu tiên của Leandro Fialho [@lefialho] trên CodePen
Nguồn
Tooltip Thiết Kế Đơn Giản
Kết quả bạn xem bên dưới nhé
Xem Chú giải công cụ đơn giản của Pen Dead bằng cách sử dụng Thuộc tính mô tả dữ liệu của Jesse Couch [@designcouch] trên CodePen
Nguồn
Cách Tạo Tooltip Phân trang HTML CSS
Kết quả bạn xem bên dưới nhé
Xem Phân trang chú giải công cụ bút của Joe [@dope] trên CodePen
Nguồn
UI Tooltip Thiết kế
Kết quả bạn xem bên dưới nhé
Xem Ý tưởng Chú giải công cụ nhỏ vui nhộn dành cho bút của Andrej Sharapov [@andrejsharapov] trên CodePen
Nguồn
Tạo Tooltip Animation
Kết quả bạn xem bên dưới nhé
Xem hoạt hình Chú giải công cụ bút của Milan Raring [@milanraring] trên CodePen
Nguồn
Tạo Hiệu ứng Chuyển động Tooltip CSS Javascript
Kết quả bạn xem bên dưới nhé
Xem chú giải công cụ Pen Bubble Point của Chris Coyier [@chriscoyier] trên CodePen
Nguồn
Nếu bạn muốn tham khảo về Tooltip của các thư viện xây dựng thư viện thì có thể xem đường dẫn bên dưới nhé
Tooltip Thư Viện
Nếu bạn muốn tham khảo về cách xây dựng Tooltip Boostrap thì có thể xem đường dẫn bên dưới nhé
Tooltip Bootstrap
Tổng kết
Qua đây mình mong bài viết sẽ cung cấp thêm cho các bạn những ví dụ về tooltip hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi mail 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ẻ