Template mình thường 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:
Hiệu ứng tooltip giống Google cho button trên menu
Code HTML
<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>
Code CSS
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 {
position: absolute;
top: 36px;
z-index: 5;
background: rgba(0,0,0,.85);
-webkit-border-radius: 3px;
border-radius: 3px;
color: #fff;
font-size: 13px;
letter-spacing: .8px;
line-height: 16px;
margin-top: 4px;
min-height: 14px;
padding: 4px 8px;
visibility: hidden;
}
button.btn:hover {
background: rgb(230,230,230);
border-radius:100%;
}
button.btn:hover .btn_hover {
visibility: visible;
}
Hiệu ứng tooltip giống bootstrap
Code HTML
<span data-tooltip='Menu chính'>
<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>
</button>
</span>
Code CSS
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%);
}
[data-tooltip] {
position: relative;
z-index: 9;
display: inline-table;
}
[data-tooltip]:before {
position: absolute;
bottom: 100%;
left: 50%;
margin-bottom: 5px;
margin-left: -40px;
padding: 4px 0;
min-width: 80px;
white-space: nowrap;
border-radius: 4px;
background-color: #000;
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 12px;
line-height: 1.4;
}
[data-tooltip]:after {
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
[data-tooltip]:before, [data-tooltip]:after {
visibility: hidden;
opacity: 0;
}
Đọc thêm: Một số icon svg trong template mặc định và cách sử dụng
