Tentang Tooltip Deskripsi pada Formulir HTML
Memaksimalkan kerja selektor adjacent sibling sangat bermanfaat untuk menciptakan komunikasi yang lebih hidup pada saat proses pengisian formulir untuk pengunjung/anggota. Idenya adalah, seorang calon anggota mencoba untuk mengisi formulir. Dan saat kursor teks aktif di dalam elemen formulir tersebut, maka akan muncul pesan singkat di sebelahnya yang menjelaskan tentang apa saja yang harus calon anggota lakukan terhadap formulir yang sedang aktif tersebut.
Ide di atas bisa kita realisasikan hanya dengan cara seperti ini:
HTML
<input type="text">
<label>Mohon ketik setiap awalan dengan huruf kapital</label>
CSS
/* Menyembunyikan label-label formulir */
label {visibility:hidden}
/* Menampilkan label formulir saat elemen input terfokus */
input:focus + label {visibility:visible}
Yang kemudian akan menghasilkan komunikasi antarmuka seperti ini:
Melakukan beberapa pembaharuan pada tampilan elemen <label>
untuk membuatnya tampak sebagai tooltip serta menambahkan efek transisi untuk memperlembut proses tampilnya deskripsi/pesan formulir, maka akan membuat komunikasi antarmuka menjadi semakin tegas tanpa harus meminta pengunjung yang sedang mengisi formulir tersebut pergi menuju ke halaman khusus mengenai panduan cara mengisi formulir. Dengan cara ini, pengunjung/calon anggota akan dipandu pada saat yang sama ketika mereka sedang mengisi formulir:
HTML
<div class="form-item">
<input type="text">
<label>Descriptions...</label>
</div>
CSS
/* Form item wrapper */
.form-item {
margin:1em 0 0;
position:relative;
}
/* Form item title */
.form-item strong {
display:block;
margin:0 0 5px;
}
/* Form items */
.form-item input,
.form-item textarea {
display:block;
border:1px solid #ccc;
padding:4px;
margin:0 0;
width:250px;
font:inherit;
line-height:normal;
color:inherit;
-webkit-box-shadow:inset 0 1px 3px -1px rgba(0,0,0,.2);
-moz-box-shadow:inset 0 1px 3px -1px rgba(0,0,0,.2);
box-shadow:inset 0 1px 3px -1px rgba(0,0,0,.2);
}
/* Tooltip */
.form-item label {
display:block;
position:absolute;
bottom:100%;
left:150px;
margin-bottom:2em;
font-size:11px;
font-weight:bold;
color:white;
white-space:nowrap;
line-height:normal;
padding:.6em 1em;
background-color:black;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
visibility:hidden;
opacity:0;
/* Transition effect */
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-ms-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
transition:all .2s ease-out;
}
/* Tooltip arrow */
.form-item label:after {
content:"";
display:block;
width:0;
height:0;
border:5px solid transparent;
position:absolute;
top:100%;
left:2em;
border-top-color:black;
}
.form-item input:focus,
.form-item textarea:focus {border-color:#aaa}
/* Show tooltip when the form is being focused */
.form-item input:focus + label,
.form-item textarea:focus + label {
visibility:visible;
opacity:1;
margin-bottom:-.5em;
}
18 Comments:
Pertamax.......~!!!
tooltip buat blog semakin profesional dan elegan :D
keren ya cuma pake css doang, tak kira repot pake javascript. :p
ini bisa di buat kayak halaman kontak gitu gak mas taufik ? :yaya:
Kalau Menerapkan Fungsi Ini Untuk From Komentar Blogger gimanyah mas ,
Apakah Ada kode default yang harus diubah atau yang lain...?
bagaimana caranya..?
kwkwkw saya udah keduluan rupanya... :D
resikonya kalo var. label tidak pakai unik id tersendiri bisa repot :-bd
sedikit OOT nih mas taufik, terjadi kesalahan seperti ini :
Maaf, tetapi kami tidak dapat menyelesaikan permintaan Anda.
Bila melaporkan kesalahan ini kepada Dukungan Blogger atau di Grup Bantuan Blogger, harap:
Uraikan apa yang Anda lakukan ketika menemui kesalahan ini.
Berikan kode kesalahan berikut.
bX-7ifl50
Informasi ini akan membantu kami melacak dan mengatasi masalah Anda! Maaf atas ketidaknyamanan ini.
⇒ /2013/03/css3-facebook-chatbox.html?showComment=1364089046660#c3132869598836285953
Entah Sampai Kapan Komentar Saya Yang satu ini Akan Di Reply.
Kalau tidak dibalas artinya tidak bisa.
Thanks tutorial ya.. :-bd
mampir sejenak ya mas tofik, saya orang baru, coba baca2 sejenak. Terimakasih banyak telah memberikan tootip deskripsinya, semoga bisa membantu para blogger lain.
Sepertinya Fungsi Ini Hampir Sama Dengan Required Pada Input ,
Mudah Memasangnya ,
Tambahkan Kode
required=""
Sudah Selesai :D
Wah, agan jago banget main CSS3 nih, wkwkwk :D
Pakai tooltip deskripsi begini, jadi lebih sedap dipandang mata. :)
Penerapannya gimana ? Masih bingung..
saya coba dulu mas :D
Ijin Coba Mas.
Post a Comment
<< Home