Hai, jumpa lagi dengan saya 🙂 , mungkin sudah banyak artikel yang ngeposting tentang bagaimana Cara Membuat Tooltips, ada yang menggunakan javascript dan lain sebagainya, Nah kali ini saya akan mereview lagi bagaimana Cara Membuat Tooltips Sederhana Dengan CSS3, berikut langkah-langkahnya.
Langsung saja, silahkan kalian buka teks editornya terlebih dahulu, kemudian ketikan atau selain kode HTML berikut.
<button> Hover Me<div class="tooltip">what's up</div> </button> <button> Hover Me<div class="tooltip">hey</div> </button> <button> Hover Me<div class="tooltip">that was easy</div> </button>
Setelah itu, lanjutkan untuk kode CSS3 berikut untuk membuat animasi tooltips nya.
button{height:100px;width:200px;
background:IndianRed;color:rgba(255,255,255,0.5)
;font-size:17pt;cursor:pointer;margin-right:5px;
margin-bottom:10px;border:none;position:relative;}
button:focus{outline:0;}
button:hover{background:Tomato;color:#fff;}
.tooltip{display:none;width:200px;
height:35px;background:rgba(0,0,0,0.5);
color:Gold;font-size:22pt;left:0;
bottom:-25px;z-index:-1;position:absolute;}
button:hover .tooltip{display:block;bottom:-42px;animation: fade 2s;}
@keyframes fade{
0%{bottom:-25px;}
15%{bottom:-48px;}
30%{bottom:-42px;}
100%{bottom:-42px;}
}
/* Pen Styling */
body{background:SteelBlue;text-align:center;font-family:'Lato',sans-serif;}
h1{color:#fff;text-shadow:0px 2px 1px #000;margin:100px 0 30px 0;font-size:30pt;letter-spacing:2px;}
Kalo sudah semua, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing dan lihat hasilnya. Selesai
Silahkan kalian modifikasi lagi menjadi lebih bagus, kalian bisa atur warna sesuai keinginan, sampai disini tutorial mengenai Cara Membuat Tooltips Sederhana Dengan CSS3, semoga bermanfaat, amin. Sampai ketemu di tutorial selanjutnya.
Selamat mencoba 🙂