How To Create Tooltips with CSS - No Javascript - Pure CSS Tutorial

Hôm nay mình giới thiệu cho các bạn 1 giao diện Tooltips Social Menu đơn giản, thướng áp dụng cho các thanh điều hướng hay social menu bằng CSS3.
<div id="social-container">
    <a href="" class="facebook">
        <i class="demo-con ecs-facebook"></i>
        <span>Facebook</span>
    </a>
    <a href="" class="google">
        <i class="demo-con ecs-gplus"></i>
        <span>Google plus</span>
    </a>
    <a href="" class="youtube">
        <i class="demo-con ecs-youtube-play"></i>
        <span>Youtube</span>
    </a>
</div>

#social-container {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    a {
        display: block;
        width: 50px;
        height: 50px;
        text-align: center;
        background-color: #262626;
        color: #fff;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        font-size: 20px;
        line-height: 50px;
        position: relative;
        span {
            position: absolute;
            padding: 6px 12px;
            bottom: calc(100% + 10px);
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-10px);
                -ms-transform: translateX(-50%) translateY(-10px);
                    transform: translateX(-50%) translateY(-10px);
            font-size: 13px;
            white-space: nowrap;
            line-height: normal;
            background-color: #03a9f4;
            color: #fff;
            border-radius: 4px;
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
            opacity: 0;
            visibility: hidden;
            &:before {
                content: "";
                position: absolute;
                width: 10px;
                height: 10px;
                background-color: #03a9f4;
                bottom: -8px;
                left: 50%;
                z-index: -1;
                -webkit-transform:rotate(45deg) translateX(-50%);
                    -ms-transform:rotate(45deg) translateX(-50%);
                        transform:rotate(45deg) translateX(-50%);
            }
        }
        &:hover {
            color: #03a9f4;
            span {
                opacity: 1;
                visibility: visible;
                -webkit-transform: translateX(-50%) translateY(0px);
                    -ms-transform: translateX(-50%) translateY(0px);
                        transform: translateX(-50%) translateY(0px);
            }
        }
    }
}

0 thảo luận về How To Create Tooltips with CSS - No Javascript - Pure CSS Tutorial

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục