Mecha versi 2.6.3 sudah dirilis!

Tentang Tooltip Deskripsi pada Formulir HTML

Tabel Konten
  1. HTML 
  2. CSS 
  3. HTML 
  4. CSS 
Gambaran Tooltip 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:

Lihat Demo

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;
}

Lihat Demo

19 Komentar

Surga Kenari

Pertamax.......~!!!

tooltip buat blog semakin profesional dan elegan :D

Surga Kenari

keren ya cuma pake css doang, tak kira repot pake javascript. :p

Anonim

ini bisa di buat kayak halaman kontak gitu gak mas taufik ? :yaya:

Anonim

Kalau Menerapkan Fungsi Ini Untuk From Komentar Blogger gimanyah mas ,
Apakah Ada kode default yang harus diubah atau yang lain...?
bagaimana caranya..?

Unknown

kwkwkw saya udah keduluan rupanya... :D

Beben Koben

resikonya kalo var. label tidak pakai unik id tersendiri bisa repot :-bd

Anonim

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.

Anonim

Entah Sampai Kapan Komentar Saya Yang satu ini Akan Di Reply.

Unknown

Thanks tutorial ya.. :-bd

google

mampir sejenak ya mas tofik, saya orang baru, coba baca2 sejenak. Terimakasih banyak telah memberikan tootip deskripsinya, semoga bisa membantu para blogger lain.

Unknown

kaloq buat tooltip kayak gini bisa gk..??
http://www.chordfrenzy.com/chord/332/peterpan-yang-terdalam-chord

Anonim

Sepertinya Fungsi Ini Hampir Sama Dengan Required Pada Input ,

Mudah Memasangnya ,
Tambahkan Kode
required=""
Sudah Selesai :D

Unknown

Wah, agan jago banget main CSS3 nih, wkwkwk :D

Unknown

Pakai tooltip deskripsi begini, jadi lebih sedap dipandang mata. :)

Unknown

Penerapannya gimana ? Masih bingung..

Anonim

saya coba dulu mas :D

Anonim

Ijin Coba Mas.

Komentar telah ditutup.