Cara Menciptakan Tooltip Pure Css Di Blogger

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

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

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

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

Gunakan CSS ini untuk menciptakan 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}

• Result

Selamat mencoba.

Tweet

Subscribe to receive free email updates: