Banner

Cách thêm hiệu ứng tooltip khi hover vào button

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.


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.

Thêm hiệu ứng tooltip khi hover vào button

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


Thêm đánh giá

Trở thành người đầu tiên bình luận cho bài viết này!

Liên hệ Zalo