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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="tooltip"> Top! <span class="tooltiptext tooltip-top">Tooltip Top!</span> </div> <div class="tooltip"> Bottom! <span class="tooltiptext tooltip-bottom">Tooltip Bottom!</span> </div> <div class="tooltip"> Left! <span class="tooltiptext tooltip-left">Tooltip Left!</span> </div> <div class="tooltip"> Right! <span class="tooltiptext tooltip-right">Tooltip Right!</span> </div> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
body { text-align: center; padding-top: 50px; } .tooltip { position: relative; display: inline-block; border: 1px dotted pink; width: 200px; height: 50px; line-height: 50px; background: lightblue; display: block; margin: 20px auto; } .tooltiptext { visibility: hidden; position: absolute; width: 150px; background: #555; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; z-index: 1; opacity: 0; transition: opacity 1s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .tooltip-top { bottom: 120%; left: 10%; } .tooltip-top::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip-right { left: 110%; top: 7%; } .tooltip-right::after{ content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent #555 transparent transparent; } .tooltip-bottom { top: 120%; left: 10%; } .tooltip-bottom::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #555 transparent; } .tooltip-left { right: 110%; top: -10%; } .tooltip-left::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #555; } |
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!
