Membuat Inline Help Tips hanya dengan CSS

Cara membuat inline help tips atau tooltip teks bantuan menggunakan HTML dan CSS. Tooltip ini akan membantu pengunjung mendapat penjelasan-penjelasan tanpa diarahkan ke halaman lain. Cukup meng-hover tooltip maka penjelasan-penjelasan akan tampil.

DEMO

Sudah tahu tooltip kan? Jika belum silahkan baca artikel: Membuat Tooltip Menggunakan CSS, Tooltip Sederhana Menggunakan jQuery.

Mula-mula tulislah markup untuk si tooltip. Inilah contohnya:

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

Elemen <p> akan ditampilkan sebagai tooltip, dan kelas 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:

.help-tip{
 position: absolute;
 top: 18px;
 right: 18px;
 text-align: center;
 background-color: #BCDBEA;
 border-radius: 50%;
 width: 24px;
 height: 24px;
 font-size: 14px;
 line-height: 26px;
 cursor: default;
}

.help-tip:before{
 content:'?';
 font-weight: bold;
 color:#fff;
}

.help-tip:hover p{
 display:block;
 transform-origin: 100% 0%;

 -webkit-animation: fadeIn 0.3s ease-in-out;
 animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{ /* The tooltip */
 display: none;
 text-align: left;
 background-color: #1E2021;
 padding: 20px;
 width: 300px;
 position: absolute;
 border-radius: 3px;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
 right: -4px;
 color: #FFF;
 font-size: 13px;
 line-height: 1.4;
}

.help-tip p:before{ /* The pointer of the tooltip */
 position: absolute;
 content: '';
 width:0;
 height: 0;
 border:6px solid transparent;
 border-bottom-color:#1E2021;
 right:10px;
 top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
 width:100%;
 height:40px;
 content:'';
 position: absolute;
 top:-40px;
 left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
 0% { 
  opacity:0; 
  transform: scale(0.6);
 }

 100% {
  opacity:100%;
  transform: scale(1);
 }
}

@keyframes fadeIn {
 0% { opacity:0; }
 100% { opacity:100%; }
}

Selamat mencoba :)

Comments

  1. mas mau tanya, coba kunjung www.zulfanafdhilla.com. yang sidebar kirinya sudah saya buat position relative. Masalahnya mas gmna cara agar background sidebar yang hitam itu menjuntai terus kebawah??

    ReplyDelete
  2. cari code :
    #sidebar-left {
    width: 180px;
    float: left;
    height: 100%;
    background: #2a3542;
    position: relative;
    }

    position diganti fixed kang.

    ReplyDelete
  3. ane dateng lagi mas,.. template ane ada yang kuran mas,
    kok halaman posting terbaru, beranda dan pisting lama di bawah kotak komentar hilang ya?? bisa di bantu mas... ane udah otak oatik ga nemu nemu juga

    ReplyDelete

Post a Comment

Popular posts from this blog

Perbedaan JavaScript dan jQuery Beserta Contoh

Cara Menggunakan :before dan :after

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template