Chuyên mục

Blogger
  • Blogger Template 5
    • Seo Blogspot 29
      • Thiết kế Blogspot 23
        • Thủ thuật Blogspot 64
          • Tiện ích Blogspot 27
            Máy tính
            • Phần mềm 43
              • Sửa lỗi Windows 18
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    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.

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

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

                    Đọc thêm: Một số icon svg trong template mặc định và cách sử dụng
                    Nội dung chính