Cara Membuat CSS3 Tool Tips

csstuts+ - Hari ini kita Kita akan membuat beberapa teknik Tooltips,dengan beberapa teknik transisi css3 dan class pseudo(semu).
Tooltips kali ini metode yang di gunakan dalam beberapa icon social yang memiliki link dan tips kemunculan seperti halnya title dalam sebuah link..metode ini hampir sama dengan kita membuat menu navigasi.dengan nampaknya sebuah tooltips atau text penjelas dalam sebuah menu... dulu saya pernah membuat tutorial tooltips dengan CSS dan Jquery namun kali ini kita akan membuat Tooltips Pure dengan CSS3

DEMO DOWNLOAD

lihat langkahnya seperti di bawah ini :
Daftar HTML yang di gunakan

<ul class="tt-wrapper">
    <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
    <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>
    <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
    <li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
    <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
    <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
</ul>

Elemen css yang digunakan agar memiliki bentuk horizontal ke kiri

.tt-wrapper li a{
    display: block;
    width: 68px;
    height: 70px;
    margin: 0 2px;
    outline: none;
    background: transparent url(../images/icons.png) no-repeat top left;
    position: relative;
}

Setiap list pasti akan memiliki gambar yang berbeda maka background yang akan kita gunakan harus memiliki class psuedo dan position background seperti hanya pada sprite background :

.tt-wrapper li .tt-gplus{
    background-position: 0px 0px;
}
.tt-wrapper li .tt-twitter{
    background-position: -68px 0px;
}
.tt-wrapper li .tt-dribbble{
    background-position: -136px 0px;
}
.tt-wrapper li .tt-facebook{
    background-position: -204px 0px;
}
.tt-wrapper li .tt-linkedin{
    background-position: -272px 0px;
}
.tt-wrapper li .tt-forrst{
    background-position: -340px 0px;
}

Karena tooltips ini dengna css maka kita harus membuat elemen tersembunyi dengan menggunakan Opacity nilai 0, dan akan nampak dengan mengarahkan mouse dan kita harus mengatur tinggi dan lebar tooltips.. yang saya gunakan adalah 100px dan di tempatkan diatas link social. tersebut maka akan nampak seperti ini:

.tt-wrapper li a span{
    width: 100px;
    height: auto;
    line-height: 20px;
    padding: 10px;
    left: 50%;
    margin-left: -64px;
    font-family: 'Alegreya SC', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: #719DAB;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 4px solid #fff;
    background: rgba(255,255,255,0.3);
    text-indent: 0px;
    border-radius: 5px;
    position: absolute;
    pointer-events: none;
    bottom: 100px;
    opacity: 0;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
}

Dan di bawah adalah ketika pointer di arahkan sebelum dan sesudah pada sebuah link anchor ,sejauh ini warna background border tooltips yang akan di tampilkan dengan teknik berbayang maka yang akan di gunakan dengan RGB color :

.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.1);
}

Karena sebelum kemunculan menggunakan opacity:0; maka kita memerlukan elemen psuedo tampilan dengan css penjelas,maka kita akan gunakan border putih pada tiap garis tooltips:

.tt-wrapper li a span:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}

dan opacity kemunculan saat pointer di arahkan kita gunakan elemen psuedo berikut :

.tt-wrapper li a:hover span{
    opacity: 0.9;
    bottom: 70px;
}

Penjelasan teknik psuedo berikut menurut saya sudah cukup,mungkin anda bisa menambahan beberapa style css yang berbeda,dan akan mudah dengan css tanpa rumit dengan sebuah javascript.

Saya harap Anda menikmati bebrapa teknik dan bisa berguna buat! SELAMAT MONCOBA

Dan perlu di ingat ini hanya akan bekerja di browser yang mendukung pseudo-elemen dan transisi CSS.

DEMO DOWNLOAD

---

Post By : denzdii
Reference: http://tympanus.net/codrops/