CSS3 18 – Hướng dẫn tạo Tooltip đơn giản bằng CSS

0
356

Xin chào các bạn, bài hôm nay mình sẽ hướng dẫn các bạn tạo Tooltip đơn giản bằng CSS, đây là bài học mang tính thực hành ứng dụng nhé.

Tooltip thường được sử dụng để mô tả cho 1 nút bấm, 1 thẻ input hay 1 dạng menu, … Trong bài viết này, mình sẽ hướng dẫn các bạn cách thức tạo Tooltip đơn giản với CSS.

Xây dựng giao diện HTML

Đầu tiên, mình sẽ hướng dẫn các bạn xây dựng giao diện HTML trước. Các bạn tạo các tooltip bằng các thẻ div như sau:

Trang trí CSS

Tiếp theo, chúng ta sẽ đi trang trí CSS để giao diện dễ nhìn hơn, các bạn có đoạn code CSS như sau:

Trong phần định dạng trên, các mã CSS đều khá cơ bản, các bạn lưu ý phần ::after chính là phần móc nhọn chúng ta thêm vào sau các thẻ span chứa nội dung tooltip, tùy từng kiểu tooltip mà ta sẽ định dạng cho chúng ở những vị trí khác nhau.

Kết quả:

Kết luận

Vậy là mình đã cùng các bạn xây dựng xong chức năng tooltip cơ bản trong CSS. Các định dạng Tooltip thì rất nhiều, từ cơ bản đến phức tạp đều có, các bạn chỉ cần hiểu bản chất xây dựng và thực hành là sẽ ok nhé.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây