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