Thêm hiệu ứng tooltip khi hover vào button
Template mình đang sử dụng 2 hiệu ứng tooltip khi hover vào button, vì có một số bạn thích hiệu ứng này nên nhờ mình chỉ cách làm. Hiệu ứng tooltip mình sử dụng giống như Google và Bootstrap và chỉ sử dụng css, tiện đây mình cũng viết bài luôn để các bạn tham khảo. cách làm như sau: 1. Hiệu ứng tooltip giống Google cho button trên menu DEMO Menu chính Đóng #HTML Copy <button class = 'btn' aria-label = 'Menu chính' role = 'Menu chính' type = 'button' > <svg><use xlink:href = '/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp' xmlns:xlink = 'http://www.w3.org/1999/xlink' ></use></svg> <div class = 'btn_hover' > Menu chính </div> </button> #CSS Copy button.btn { background: transparent; border: none; cursor: pointer; padding: 8px; outline: none; } button.btn svg { height: 24px; width: 24px; min-width: 24px; min-height: 24px; vertical-align: text-bottom; fill: hsl(0,0%,53.3%); } .btn_hover { …
