Jquery ile Form ToolTip Hazırlamak (Plug-in Kullanmadan)

Bazen form doldururken kullanıcılara yardım edebilecek balon şeklinde beliren kutular ile uyarmak gerekli olabilir. Bunun için bir kaç Jquery eklentisi mevcut. Fakat bunu kendimiz de hazırlayabiliriz ayrıca kendimiz hazırladığımızda daha orijinal şeyler üretebiliriz. Bu yazımda Form ToolTip hazırlama tekniklerinden birini anlattım. Form ToolTip'i hazırlarken CSS ve Jquery kütüphanesininden yararlanacağız.

Form ToolTip hazırlamadan önce hazırladığım demoya buradan bakabilirsiniz.

Form ToolTip hazırlarken iki adet span elemanı kullacağız. Birinin arka planına (background-image) bir ok resmi yerleşireceğiz, diğerinde ise kullacıya bildireceğimiz yazıyı yazacağız. Bu iki span elamanın birbiri içinde olacak ve yazı kutusu ile ok resminin (pointer.png) yanyana durması için elamanların CSS özelliklerini gireceğiz. Bunun için aşağıdaki iki CSS kodunu html dosyamızın head etiketleri arasına yerleştirelim:
<style type="text/css">
 
.mytooltip {

  margin-top: -2px;
  margin-left: 8px;
  padding: 3px;
  border: 1px solid #b8b8b8;
  background-color: #fffbd7;
  display: none;

} 

.pointer {

 position:absolute;
 background: url(pointer.png) left top no-repeat;

}

</style>
<span class="pointer">
  <span class="mytooltip">Zorunlu değil!</span>
</span>
Yukarıdaki span elamanlarını html olarak render ettiğimde aşağıdaki gibi bir Form ToolTip oluşacak (display:none olmadığını varsayarsak):

form-tooltip-ornek.jpg

Şimdi Html Formunu oluşturalım. Formun düzenini sağlamak için tablodan yararlanacağız. Form ToolTip'ini input etiketlerin içine yerleştireceğiz. Tabi daha önceden tüm Form ToolTip'leri görünmez olarak yukarıda ayarladığımız için görünmeyecek.

Hazırladığım örnek iki adet text tipinde form input elamanı var. Formu Form ToolTip olacak span elamanlarıyla birlikte aşağıdaki gibi oluşturalım:
<form action="#" >

 <table >
  <tr  >
   <td>İsim : </td>
   <td  >
    <input type="text" name="isim" > 
     <span class="pointer" >
      <span class="mytooltip">En az 3 karakter uzunluğunda olmalı</span>
     </span> 
    </input> 
   </td>
  </tr > 
  
  <tr  >
   <td>Siteniz : </td>
   <td  >
    <input type="text" name="isim" > 
     <span class="pointer" >
      <span class="mytooltip">Zorunlu değil!</span>
     </span> 
    </input> 
   </td>
  </tr > 
 </table>

</form>
Form içine yerleştirdiğimiz ToolTip'lerin hepsi görünmez. Jquery ile olay yaratalım ve ToolTip olacak span elamanın CSS display özelliğini inline-block yaparak kullanıcıya görünür hale getirelim. Jquery ile form input alanına odaklandığında (focus) ve odaklanmadığında (blur) olay yaratalım ve ilgili ToolTip'i görünür hale getirelim. Jquery (javascript) kodumuz:
$(function (){

	// Burada herhangi bir form input alanına odaklandığında 
	// ilgili span elemanını (Tooltip'i)
	// görünür hale getiriyoruz. Ayrıca olayın tam tersini de
	// burada hallediyoruz.
	$("input").focus(function () {
		$(this).parent().find('span .mytooltip').css('display','inline-block');	
		}
	).blur(function () {	
	$(this).parent().find('span .mytooltip').css('display','none');
		}
	);

});
Tüm işlemler bitti :) Form ToolTip örnek dosya arşivini form-tooltip-jquery-hazirlma-dosyalar linkinden indirebilirsiniz. Kendi ok (pointer.png) resmini ve CSS özelliklerini oluşturup ToolTip görünümünü değiştirebilirsiniz.
yazan Zülküf Küçüközer tarih   22nd September 2009
primary key words  Jquery | Form tooltip hazırlamak | Css okunma  9337
secondary key words  Jquery kütüphanesi | input
Bu yazı hakkında yorum yapılmamış.