Tạo Tooltip bằng CSS3

Tooltip là những nhãn nhỏ chứa thông tin về phần tử mà khi ta rê chuột vào phần tử này thì tooltip sẽ xuất hiện,nó có chức năng tương tự như thuộc tính title trong thẻ html.Bài viết này tôi sẽ hướng dẫn các bạn tạo tooltip cho icon chia sẻ qua mạng xã hội bằng hiệu ứng của css3-transition.

Xem Demo
Đây là một số hình ảnh mình sẽ sử dụng troang thủ thuật này(ở bài hướng dẫn này ta sử dụng icon 48×48):

Mở đầu với mã HTML

<ul class="tooltip">
    <li>
        <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix30rk1cg17UOLa609vx7SJ444otIxSsNgUGLxnzUh9GCwrBczNEqAtPOTnbpLmmK3A-fnU2_WmBWG534T3Kvfr_OqimlDG9x5f1ASjIQextkqJTsHChIczes5sXYuXoiyuwlLxtPn6xE/s1600/facebook_white.png">
            <span>Đăng lên facebook</span><!--tooltip-->
        </a>
    </li>
    <li>
        <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wBsiEBNgZsKsZ_OH1GrcAwL4p9zhz5bJPOmjTjRG22Y_QFy1AaYCbqGQYSLvZMLziBR0N6EWCt8tJAyw5QlgO16SxserUOV5DLbZbsnT0XTQm5Zts_5myB2Fp-XmU7iuolmcO7wvK5g/s1600/pinterest_white.png">
            <span>Đăng lên pinterest</span>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga8WBKIY4OFQF1plosHnDK-xxr-7TK6Eo_Eu00cAk0WpvniFpBkZHnBFabZuQ93paN3BuGMn-6eNRkiTsHd_zrdswB7dOEXaLo14pVI9r_VDIabOXCr0_CLZ54Ekjt4Gm6fyz8neRAhWs/s1600/twitter_white.png">
            <span>Chia sẻ qua twitter</span>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3cQbt0dw3wl0W3z7LVZ7J7_5JgSoLcWNejnwi-5HOXlT2VKsWPfqJQhjNeipJteG-9C_CBa9QS_zohIdetL0R9nvtX62JmHA7sjX7f-SqYRjLVCj6wi2PVPqeuYYpLkWG9-rDYwB5FjE/s1600/google_plus_white.png">
            <span>Đăng lên google+</span>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKuGUPp7pswgWHidngKFiAniU9B1Olz7iCm_uskPo45Krz-wrOdccjoEQdKw4DP0BgO2msywmPeOogjRCn4wVehw0XREwWIFT0IJM6AReAsRa_xpzVG1CS-xxeHDUPEn9nF7ircwFzjc/s1600/rss_white.png">
            <span>Nhận tin RSS</span>
        </a>
    </li>
</ul>

Ở đây tooltip là thẻ span mang thông tin về mỗi icon. Mục đích của ta ở đây là khi rê chuột vào icon thì sẽ thẻ span sẽ xuất hiện.

CSS

Gõ đoạn mã css như sau:

.tooltip li{
    display:inline;
}
 
.tooltip a{
    float:left;
    position:Relative;
    margin-left:10px;
    margin-right:10px;
}
 
.tooltip a span{
    position:Absolute;
    top:-25px;
    left:-100%;
    white-space:nowrap;
    font-size:12px;
    font-family:arial,sans-serif;
    padding:6px 17px;
    border-radius:3px;
    color:white;
    background-color:#101010;
    text-shadow:0 1px 0 rgba(0,0,0,0.7);
    box-shadow:0 1px 1px  rgba(0,0,0,1);
}

Kết quả:

Sau đó sử dụng pseudo-class để tạo hình tam giác giống như hình dưới

Code:

.tooltip a span:after{
    content:"";
    width:0;
    height:0;
    position:absolute;
    bottom:-12px;
    left:48%;
    border:6px solid transparent;
    border-top:7px solid #101010;
}

Nếu các bạn chưa biết cách tạo hình tam này có thể xem qua bài sau.

Sau đó chúng ta ẩn tooltip này đi bằng cách thêm cho thẻ span dòng code sau.

.tooltip a span{
     /*---code trước---*/
    visibility:hidden;
    opacity:0;
}

Ở thẻ span ta chú ý đến 3 thuộc tính cùng tham số của nó,thứ nhất là visibility:hidden dùng để ẩn tooltip đi rồi đến khi rê chuột vào icon ta sẽ để tham số là visible để nó xuất hiện.Còn 2 giá trị còn lại là opacity:0 và top:-25px với mục đích để tạo hiệu ứng bằng css-transition khi tooltip này xuất hiện .Ta có đoạn mã cuối như sau:

/*---thêm hiệu ứng với css-transition---*/
.tooltip a span{
    /*---code trước---*/
    -moz-transition:top 0.4s,opacity 0.4s ease;
    -webkit-transition:top 0.4s,opacity 0.4s ease;
    -o-transition:top 0.4s,opacity 0.4s ease;
    transition:top 0.4s,opacity 0.4s ease;
}
 
/*--code khi rê chuột vào icon---*/
.tooltip a:hover span{
    visibility:visible;
    top:-40px;
    opacity:1;
}

Khi rê chuột vào icon, tooltip sẽ xuất hiện với hiệu ứng giống như trong demo(chả biết miêu tả hiệu ứng này như thế nào nữa :D )

zlatanblog