Membuat Inline Help Tips hanya dengan CSS

Membuat inlinehelp tooltip menggunakan CSS dan HTML sederhana.

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