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 :)