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.

  • Taufik Nurrohman

  • Anonim

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

  • Taufik Nurrohman

    Kalau tidak dibalas artinya tidak bisa.

  • 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.