Cara Membuat Tooltip Pure CSS Di Blogger



Syukur alhamdulillah kali ini saya bisa membagikan tutorial lagi buat kalian yaitu Cara Membuat Tooltip Pure CSS Di Blogger Seperti biasa saya dapat tutorial ini dari blog nya arlinadzgn.com blog belajar saya juga untuk memahami tentang desain blog.

Kegunaannya tooltip ini adalah memudahkan pengunjung di blog kita serta penjelasan - penjelasan tanpa harus di arahkan ke halaman lain cukup dengan meng-over tooltip tersebut maka penjelasan tersebut akan tampil.

Nah jika kalian penasaran simak artikel kali ini, mula - mula kita tulis markup untuk tootip tersebut contoh nya di bawah ini :
<div class="help-tip">
<p>Ini adalah contoh tooltip. Membuatnya hanya dengan HTML dan CSS. Ikuti tutorialnya di sini.
</p>
</div>

Elmen <p> akan di tampilan sebagai tooltip dan tag. help-tip adalah bulatan biru yang ada tanda tanya di dalamnya. Jika tanda div. help-tip di-hover maka isi dari elemen <p> akan di tampilan. Jadi secara defalutl elemen <p> akan di sembunyikan hanya akan terlihat saat hover untuk isi paragraf bisa apa saja seperti teks, html, gambar dll.

Gunakan CSS ini untuk membuat tooltipnya :
/* 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. 

Reaksi:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser