Tuesday, January 13, 2015

Cara Membuat Tooltip Pure CSS di Blogger

Cara Membuat Tooltip Sederhana di Blogger - Tooltip ini akan membantu pengunjung mendapat penjelasan-penjelasan tanpa diarahkan ke halaman lain. Cukup meng-hover tooltip maka penjelasan-penjelasan akan tampil.

Cara Membuat Tooltip Sederhana di Blogger

Mula-mula tulislah markup untuk si tooltip. Inilah contoh di bawah ini :

<div class="help-tip">
<p>Ini adalah contoh tooltip. Membuatnya hanya dengan HTML dan CSS. Ikuti tutorialnya di sini.
</p>
</div>

Elemen <p> akan ditampilkan sebagai tooltip, dan tag div .help-tip adalah bulatan biru dengan tanda tanya di dalamnya. Saat kelas div .help-tip di-hover maka isi dalam elemen <p> akan ditampilkan. Jadi secara default paragraf atau <p> disembunyikan dan hanya akan terlihat saat hover. Isi paragraf bisa apa saja, teks, gambar, atau HTML lainnya.

Gunakan CSS ini untuk membuat tooltip-nya :

/* CSS Tooltip */
.help-tip{position:absolute;top:16px;right:16px;text-align:center;background-color:#29b6f6;border-radius:50%;width:24px;height:24px;font-size:12px;line-height:26px;cursor:default;transition:all 0.5s cubic-bezier(0.55,0,0.1,1)}
.help-tip:hover{cursor:pointer;background-color:#ccc}
.help-tip:before{content:'?';font-weight:700;color:#fff}
.help-tip p{visibility:hidden;opacity:0;text-align:left;background-color:#039be5;padding:20px;width:300px;position:absolute;border-radius:4px;right:-4px;color:#fff;font-size:13px;line-height:normal;transform:scale(0.7);transform-origin:100% 0%;transition:all 0.5s cubic-bezier(0.55,0,0.1,1)}
.help-tip:hover p{cursor:default;visibility:visible;opacity:1;transform:scale(1.0)}
.help-tip p:before{position:absolute;content:'';width:0;height:0;border:6px solid transparent;border-bottom-color:#039be5;right:10px;top:-12px}
.help-tip p:after{width:100%;height:40px;content:'';position:absolute;top:-5px;left:0}
.help-tip a{color:#fff;font-weight:700}
.help-tip a:hover,.help-tip a:focus{color:#fff;text-decoration:underline}

Selamat mencoba.