Jquery Tooltip Nedir ve Nasıl Uygulanır

~~Gmn~~ · 1 20-11-2010, 14:08:38

Merhaba arkadaşlar
Bu paylaşımımda sizlere Tooltip'in kullanımını anlatmaya çalışacağım.İlk olarak tooltip nedir ve ne işe yarar sorularına cevap aradıktan sonra uygulamanın nasıl kullanılacağına geçebiliriz.

Tooltip nedir : Tooltip web sitelerinde kelime veya resimlerin üzerine mouse'umuzu getirdiğimizde çıkan küçük bilgi baloncuklarıdır.Tooltip bizlere daha farklı ve göze hoş gelen bilgilendirme baloncukları oluşturmamızı sağlar ve kullanıcıların gözüne daha hoş gelen açıklama kısımları oluşturmamız için kolaylık sağlar.

Tooltip örnekleri :
Internet üzerinde bu jquery uygulamasının kullanımı öğreneceğiniz çok sayıda kaynak bulunmaktadır.Bunların benim anlatıcağım tooltip'ten farkı ya arkaplan özelliği için kullanılmış resimler yada tooltip'in hareket hızı veya şeklidir.Genel olarak tooltip'lerin kullanımı benzerdir,anlattığım uygulamayı öğrenirseniz diğerlerini kullanmak içinde aynı mantığı uygulayabilirsiniz.
Aşşağıdaki 3 kaynağı kullanarak farklı tooltip uygulamarının kullanımı hakkında bilgi edinebilirsiniz.

1 - qTip - The jQuery tooltip plugin - Demos - Index
2 - http://flowplayer.org/tools/demos/index.html
3 - Prototip 2 - Create beautiful tooltips with ease

Sitemde kullandığım tooltipten bir görüntü :

Şimdi kullandığım bu tooltip tekniğinin nasıl uygulandığına gelelim
1- İlk olarak jquery kütüphanesine ihtiyacımız var,bunu çözmek için yapmamız gereken buradan jquery'i indirip temamızın anadizinine(index.php,search.php,header.php dosyalarımızın bulunduğu kısım) javascripts adında bir klasör oluşturup bu klasörün içinde indirdiğimiz jquery dosyasını taşımaktır.

2- Daha sonra bu jquery'i head tagları arasında tanımlalamız gerekmektedir,bunun için yapmamız gereken sitemizin <head></head> tagları arasına aşşağıdaki kodu eklemektir.

Kod:

<script src="<?php bloginfo('template_url'); ?>/javascripts/jquery.js" type="text/javascript">

3- Bu tanımlamayı yaptıktan sonra tooltip için gerekli olan vtip.jscript dosyasını buradan indiriyoruz ve bu indirdiğimiz dosyayıda jquery.js dosyasını taşıdığımız yere yani javascripts klasörünün içine taşıyoruz.

4- Daha sonra bu vtip.js içinde <head></head> tagları arasına gerekli tanımlamayı aşşağıdaki gibi yapıyoruz.

Kod:

<script src="<?php bloginfo('template_url'); ?>/javascripts/vtip.js" type="text/javascript">

5- Bu adımdan sonra js dosyalarını sitemizde kullanmak için gerekli tanımlamaları yapmış oluyoruz.Bundan sonra yapmamız gereken tooltip uygulamasını kullanıcağımız yerlerde bunu belirtmektir.Ben kategorilerim bulunduğu resim dosyalarında bu tanımlamaları yaptım,benim yaptığım gibi yapmak isteyen arkadaşlar için bir örnek;

Kod:

<a href="http://www.egemenozbeyli.com/kategori/photoshop" ><img src="<?php bloginfo('stylesheet_directory'); ?>/images/menuhead2/photoshop.png" alt="" title="Kategori : Photoshop"   class="vtip" /></a>

Üstteki koddada göründüğü üzere Photoshop kategori resmim için yani photoshop.png adlı imaj dosyası için class="vtip" diye bir tanımlama yaptım.Bu class'ım içinde gerekli düzenlemeri style.css dosyamın içinde ayrıca hazırladım.Burda title="Kategori : Photoshop" bölümü resim dosyamın üzerine gelince çıkacak olan baloncuk içindeki yazıyı belirlemektedir.
Vtip için gerekli css kodlarınıda aşşağıdaki görebilirsiniz.

Kod:

p#vtip {
display:none;
color:#fff;
position:absolute;
left:5px;
font-size:.8em;
background-color:#88d508;
border:1px solid #e4e4e4;
z-index:9999;
padding:5px;
}

Bu css ayarları benim istediğim özelliklerdedir siz bunları kendi tercihlerinize göre değiştirebilirsiniz tabikide.En son adımımızda buydu,bu adımıda tamamladıktan sonra belirlediğimiz dosyaların üzerinde baloncuk içinde gerekli açıklamalar oluşacaktır.

Umarım faydalı ve kolay bir anlatım olmuştur,Eğer sorularınız olursa yorum bölümünden sorabilirsiniz...

kaynak : kendi sitemdir

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder