CSS Tooltip là cách đơn giản để trình bày một nội dung mà người dùng quan tâm nhưng lại không gây chiếm không gian web: chỉ khi người dùng di chuột lên văn bản hoặc hình ảnh nào đó thông tin mới hiện ra. Cách này có thể làm tăng trải nghiệm người dùng trên website bạn rất tốt. Trong bài viết này mình sẽ hướng dẫn mọi người làm một CSS Tooltip đơn giản mà không cần sử dụng đến JQuery - chúng ta chỉ cần CSS để làm điều đó. Ngoài ra, bạn có thể quyết định Tooltip sẽ hiển thị ở vị trí nào khi rê chuột lên bằng cách xác định vị trí hiển thị một cách dễ dàng.
HTML
Trước hết chúng ta cần đưa một đoạn mã HTML như sau:
CSSHTML:<div class="tooltip top">Hover over me <span class="tiptext">CSS Tooltip text</span> </div>
Để hiển thị tooltip chúng ta sử dụng đoạn mã sau:
Để hiển thị tooltip ở các vị trí tùy chỉnh, chúng ta thực hiện thêm một số thuộc tính nữa. Bạn hãy so sánh:HTML:.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 3px; padding: 6px 0; position: absolute; z-index: 1; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .tooltip .tiptext::after { content: ""; position: absolute; border-width: 5px; border-style: solid; } .tooltip:hover .tiptext { visibility: visible; }
Top Tooltip CSS:
Bottom Tooltip CSS:Mã:.tooltip.top .tiptext{ margin-left: -60px; bottom: 150%; left: 50%; } .tooltip.top .tiptext::after{ margin-left: -5px; top: 100%; left: 50%; border-color: #2E2E2E transparent transparent transparent; }
Left Tooltip CSS:HTML:.tooltip.bottom .tiptext{ margin-left: -60px; top: 150%; left: 50%; } .tooltip.bottom .tiptext::after{ margin-left: -5px; bottom: 100%; left: 50%; border-color: transparent transparent #2E2E2E transparent; }
Right Tooltip CSS:HTML:.tooltip.left .tiptext{ top: -5px; right: 110%; } .tooltip.left .tiptext::after{ margin-top: -5px; top: 50%; left: 100%; border-color: transparent transparent transparent #2E2E2E; }
Đơn giản chỉ cần vậy thôi là chúng ta có tooltip rồi.HTML:.tooltip.right .tiptext{ top: -5px; left: 110%; } .tooltip.right .tiptext::after{ margin-top: -5px; top: 50%; right: 100%; border-color: transparent #2E2E2E transparent transparent; }
Hi vọng cái tip đơn giản này giúp ích cho nhiều bạn![]()
Tutorial Cách tạo một CSS Tooltip
Thảo luận trong 'HTML vs Browser' bắt đầu bởi babyinternet, 16/8/16.
Bình luận
Thảo luận trong 'HTML vs Browser' bắt đầu bởi babyinternet, 16/8/16.