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:
Elemen
Gunakan CSS ini untuk membuat tooltip-nya:
Selamat mencoba :)
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 :)
Langsung praktek :)
ReplyDeleteMantafff kang
ReplyDeletemas 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??
ReplyDeletecari code :
ReplyDelete#sidebar-left {
width: 180px;
float: left;
height: 100%;
background: #2a3542;
position: relative;
}
position diganti fixed kang.
ane dateng lagi mas,.. template ane ada yang kuran mas,
ReplyDeletekok 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