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

#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 {

    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;

}

2. Hiệu ứng tooltip giống bootstrap

DEMO

#HTML

Copy


<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>

#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%);

}

[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;

}