Tooltip là phần chú thích thêm khi người dùng rê chuột vào một nội dung nào đó. Phần tooltip có thể ngắn gọn nhưng cũng có lúc là cả đoạn văn dài tuỳ mục đích thiết kế. Nhìn chung tooltip cũng giống như thuộc tính title của thẻ a (liên kết), nhưng title thì quá đơn giản và không tạo được điểm nhấn trãi nghiệm. Với tooltip bạn có thể tuỳ biến cách hiển thị, hiệu ứng, màu sắc,… để phần chú thích trở nên nhấn mạnh hơn, đẹp mắt hơn với người dùng. Show Dưới đây mình sẽ cung cấp cho các bạn cách làm chi tiết từ cơ bản nhất là chỉ dùng CSS đến phức tạp hơn một chút là dùng thêm thư viện Jquery. 1 Tạo tooltip cơ bảnChỉ rê chuột và hiện tooltip, không có mũi tên chỉ hướng, không có hiệu ứng nào. body {text-align:center} .tooltip { position: relative; display: inline-block; border: 1px solid black; padding:10px; border-radius: 3px; margin-bottom:5px; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; left:110%; top: 5px; } .tooltip:hover .tooltiptext { visibility: visible; }<h2>Tooltip cơ bản nhất</h2> <div class="tooltip">Rê chuột lên <span class="tooltiptext">Tooltip đây</span> </div><br> <div class="tooltip">Rê chuột lên <span class="tooltiptext">Tooltip đây</span> </div><br> <div class="tooltip">Rê chuột lên <span class="tooltiptext">Tooltip đây</span> </div><!DOCTYPE html> <html> <style> .body-center {text-align:center} .tooltip { position: relative; display: inline-block; border: 1px solid black; padding:10px; border-radius: 3px; margin-bottom:5px; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; left:110%; top: 5px; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <div class="body-center"> <h2>Tooltip cơ bản nhất</h2> <div class="tooltip">Rê chuột lên <span class="tooltiptext">Tooltip đây</span> </div><br> <div class="tooltip">Rê chuột lên <span class="tooltiptext">Tooltip đây</span> </div><br> <div class="tooltip">Rê chuột lên <span class="tooltiptext">Tooltip đây</span> </div> </div> </body> </html> 2 Tooltip bên trái với mũi tên bên phải + hiệu ứng di chuyểnVới mũi tên và hiệu ứng, tooltip sẽ trở nên đẹp mắt và dễ chịu hơn. Ví dụ cho tooltip bên trái, mũi tên bên phải .body-center {text-align:center} .tooltip { position: relative; display: inline-block; border: 1px solid black; padding:10px; border-radius: 3px; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 5px; right: 110%; opacity: 0; transform: translate3d(-20px,0,0); transition: all .5s ease-out; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent black; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; transform: translate3d(0,0,0) }<div class="body-center"> <h2>Tooltip bên trái, mũi tên bên phải</h2> <div class="tooltip">Rê chuột lên <span class="tooltiptext">Tooltip đây</span> </div> </div><!DOCTYPE html> <html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> .body-center {text-align:center} .tooltip { position: relative; display: inline-block; border: 1px solid black; padding:10px; border-radius: 3px; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 5px; right: 110%; opacity: 0; transform: translate3d(-20px,0,0); transition: all .5s ease-out; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent black; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; transform: translate3d(0,0,0) } </style> <body> <div class="body-center"> <h2>Tooltip bên trái, mũi tên bên phải</h2> <div class="tooltip">Rê chuột lên <span class="tooltiptext">Tooltip đây</span> </div> </div> </body> </html>3 Tooltip bên trên, mũi tên phía dướiTương tự ta có code đầy đủ như sau <!DOCTYPE html> <html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> .body-center {text-align:center} .tooltip { position: relative; display: inline-block; border: 1px solid black; padding:10px; border-radius: 3px; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 120%; left: 50%; margin-left: -60px; opacity: 0; transform: translate3d(0,-20px,0); transition: all .5s ease-out; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; transform: translate3d(0,0,0) } </style> <body> <div class="body-center"> <h2>Tooltip bên trên, mũi tên phía dưới</h2> <div class="tooltip">Rê chuột lên <span class="tooltiptext">Tooltip đây</span> </div> </div> </body> </html>4 Tooltip bên dưới, mũi tên bên trên<!DOCTYPE html> <html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> .body-center {text-align:center} .tooltip { position: relative; display: inline-block; border: 1px solid black; padding:10px; border-radius: 3px; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 10px 0; position: absolute; z-index: 1; top: 130%; left: 50%; margin-left: -60px; opacity: 0; transform: translate3d(0,20px,0); transition: all .5s ease-out; } .tooltip .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; transform: translate3d(0,0,0) } </style> <body> <div class="body-center"> <h2>Tooltip bên dưới, mũi tên bên trên</h2> <div class="tooltip">Rê chuột lên <span class="tooltiptext">Tooltip 1</span> </div> <div class="tooltip">Rê chuột lên <span class="tooltiptext">Tooltip 2</span> </div> </div> </body> </html>5 Tooltip bên phải, mũi tên bên tráiTrường hợp này ta thêm ví dụ với nút nhấn <!DOCTYPE html> <html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> .body-center {text-align:center} .tooltip { position: relative; display: inline-block; } button {display:block; margin-bottom:20px; height: 40px} .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 10px 0; position: absolute; z-index: 1; top: 0; left: 120%; opacity: 0; transform: translate3d(20px,0,0); transition: all .5s ease-out; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; transform: translate3d(0,0,0) } </style> <body> <div class="body-center"> <h2>Tootip bên phải, mũi tên bên trái, dùng cho nút button</h2> <div class="tooltip"><button>Trang chủ</button> <span class="tooltiptext">Tooltip 1</span> </div> <br> <div class="tooltip"><button>Liên hệ</button> <span class="tooltiptext">Tooltip 2</span> </div> </div> </body> </html>6 Tạo tooltip hiệu ứng chuyển động với CSS và Jquery<!DOCTYPE html> <html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .tooltiper { position: relative; display: inline-block; color: rgba(126, 0, 255,0.9); font-size: 1.1rem; } .tooltiper .tooltip { position: absolute; font-size: 0.9rem; text-align: left; background: rgba(126, 0, 100,0.9); color: white; padding: 5px 10px; border-radius: 5px; display: block; top: -30px; left: 50%; height: 0; transform: translateX(-50%) translateY(50%); -webkit-transform: translateX(-50%) translateY(50%); -o-transform: translateX(-50%) translateY(50%); line-height: 1.4em; opacity: 0; } .tooltiper:hover .tooltip { opacity: 1; height: auto; width:100px; transform: translateX(-50%) translateY(0%); -webkit-transform: translateX(-50%) translateY(0%); -o-transform: translateX(-50%) translateY(0%); transition: transform 0.2s ease-out, opacity 0.1s ease-out; -webkit-transition: transform 0.2s ease-out, opacity 0.1s ease-out; -o-transition: transform 0.2s ease-out, opacity 0.1s ease-out; } .tooltiper .tooltip:after { left: calc(50% - 10px); top: calc(100% + 10px); border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-top-color: rgba(126, 0, 100,0.9); border-width: 10px; margin-top: -10px; } </style> <body style="text-align:center;"> <div> <div><p>Website canxem.com bao gồm các <span class="tooltiper" data-tooltip="Kỹ năng sống <br> Sức khoẻ </br> Giáo dục </br> Vọc web">Chuyên mục</span>. Chuyên mục <span class="tooltiper" data-tooltip="Tất nhiên là nói về kỹ năng sống rồi, hihi">Kỹ năng sống</span> là những bài viết về kỹ năng cơ bản trong cuộc sống... Đặc biệt, chuyên mục <span class="tooltiper" data-tooltip="Toàn những bài chất lượng tâm huyết về thiết kế web">Vọc web</span> sẽ cung cấp cho các bạn kiến thức thiết kế web rất bổ ích... </p></div> </div> <script> var elements = ''; $(document).ready(function(){ toolTiper('.tooltiper'); }); var eLtop = ''; var eLleft = ''; var eLtw = ''; var eLth = ''; var eLcontent= ''; function toolTiper(elements) { $(elements).each(function(){ var eLcontent = $(this).attr('data-tooltip'); var eLtop = $(this).position().top; var eLleft = $(this).position().left; $(this).append('<span class="tooltip">'+eLcontent+'</span>'); var eLtw = $(this).find('.tooltip').width(), eLth = $(this).find('.tooltip').height(); console.log(eLtw); $(this).find('.tooltip').css({ "top": (0 - eLth)+'px' }); }); } </script> </body> </html>7 Một ví dụ khác dùng tooltip với nút button<!DOCTYPE html> <html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> body { background: #39393A; font-size: 1.2rem; font-family: Montserrat; letter-spacing: 1px; color: white; } section { width: 100%; height: 100vh; display: table; } section .center { display: table-cell; text-align: center; vertical-align: middle; } .button { position: relative; background: #E75A7C; display: inline-block; height: 60px; width: 200px; border-radius: 50em; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2); } span, em, i { position: absolute; width: 100%; height: 100%; left: 0; } span { overflow: hidden; } .button em { top: 0; line-height: 60px; } .button i { top: 100%; line-height: 60px; } .button:hover em, .button.hover em{ top: -100%; } .button:hover i, .button.hover i{ top: 0%; } em, i { transition: top 0.3s; } .button::before, .button::after { position: absolute; opacity: 0; visibility: hidden; transition: all 0.3s; } .button::before { content: 'Cảm ơn bạn đã truy cập canxem.com!'; width: 280px; height: 60px; padding: 5px 10px; background: #0E84A1; border-radius: 0.25em; bottom: 90px; line-height: 60px; left: calc(50% - 140px); font-size: 15px; } .button::after { content: ''; width: 0px; height: 0px; border: 10px solid transparent; border-top-color: #0E84A1; bottom: 70px; left: calc(50% - 10px); } .button:hover::before, .button:hover::after, .button.hover::before, .button.hover::after{ opacity: 1; visibility: visible; } .button:hover::before, .button.hover::before{ bottom: 80px; } .button:hover::after, .button.hover::after{ bottom: 60px; } </style> <body style="text-align:center;"> <section> <div class="center"> <h3>Tooltip cho button</h3> <a class="button" href="#0"> <span> <em>Canxem.com</em> <i>Cần xem chấm com</i> </span> </a> </div> </section> </body> </html>Hy vọng bài viết sẽ có ích với bạn. Mọi thắc mắc vui lòng để lại bình luận bên dưới. |
