Skip to main content
Ivhaa Design

follow us

Cara Membuat Tooltip Pure CSS Di Blogger

Cara Membuat Tooltip Pure CSS Di Blogger

Baca juga:



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. 

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar