jQuery ile Tooltip eklentisi yapalım

Uzun zamandır jQuery ile alakalı yazı yazmak istiyordum. Zaman bulamadığım için bir türlü yazamamıştım. Şimdi bunu telafi etmek için güzel bir uygulama yapacağız.
Yapacağımız uygulama, herhangi bir linkin üzerine gelince çıkan bilgilendirme mesajlarından (tooltip) yapmak.

Bu uygulamayı yapmak için temel HTML/CSS ve Javascript bilginizin olması sizin için daha olur.
Kullanacağımız tooltipleri 2 şekilde yapacağız.

1. İçerik bir div olacak. İçerisine resim link gibi elemanlar eklenebilecek.
2. Tooltip’in içeriği linkin veya alt değeri olacak. Yani sadece metin olabilir.

Birinci Uygulama

Tooltip bir div bölmesi olacak ve bu bölmenin z-index değeri farklı olduğundan diğer elemanların üzerinde gibi duracak. Fakat bunun için position değerinin absolute olması lazım.
Önce HTML kısmını yapalım.

<span class="tooltip">
<a class="t1" href="#">link1</a>
<a class="t2" href="#">link2</a>
<a class="t3" href="#">link3</a>
<a class="t4" href="#">link4</a>
</span>
<div id="tooltip" class="a-t1">1</div>
<div id="tooltip" class="a-t2">2</div>
<div id="tooltip" class="a-t3">3</div>
<div id="tooltip" class="a-t4">4</div>

span içine aldığımız linklerin üzerine geldiğimizde kendisine bağlı div bölmesi görünecek. Her link ile div arasındaki bağlantıyı şöyle yaptık: Her linke ait div’in sınıfı “a-[linkin sınıf ismi]” şeklinde olacak. Yani sınıfı “t1” olan linke bağlı div’in sınıfı “a-t1” olacak.
Bölmeler için herhangi bir şey yazmadığımız için şuan tüm bölmeler görünüyor. Şimdi de css kodlarını yazalım:

#tooltip{
z-index:100;
position:absolute;
padding:5px;
-moz-border-radius:4px;
font-weight:bold;
display:none;
border:1px solid #76601D;
color:#635529;
background-color:#F7FB91;
}

Burdaki “-moz-border-radius” değeri köşelerin yuvarlanması için kullanılıyor. Fakat internet explorer’da çalışmıyor.
Bunları da yazdıktan sonra jQuery kısmına geçelim(jQuery’yi şuradan indirebilirsiniz.):

<script type="text/javascript">
$(document).ready(function(){
$("span.tooltip a").mouseover(function(e){
e = e || window.event;
xx = e.pageX-10;
yy = e.pageY+30;
$("div.a-"+$(this).attr("class")).css({"left":xx,"top":yy}).fadeIn("fast");
}).mouseleave(function(){
$("div.a-"+$(this).attr("class")).fadeOut("fast");
});
});
</script>

2.satır: $(document).ready() fonskiyonunun içine yazdığımız jQuery kodları sayfa yüklendiği anda çalışır.
3.satır: <span class=”tooltip”> bölümünün içindeki herhangi bir linkin üzerine fareyi getirdiğimizde yani mouseover() olduğunda gerçekleşecek fonksiyon
4.satır: farenin koordinatlarını öğrenmek için “e” değerini tanımladır.
5.satır: xx değeri farenin x koordinatı
6.satır: yy değeri farenin y koordinatı. -10 ve +30 ile toplayarak linkin sol alt kısmında görünmesini sağlıyoruz.
7.satır: $(this).attr(“class”) fonksiyonun döndürdüğü değer üzerinde bulunduğumuz linkin sınıfıdır. “div.a-”+[link sınıfı]” şeklinde oluşturduğumuz div’lerin “top” ve “left” değerinin farenin koordinalatı olarak ayarlıyoruz. fadeIn() fonksiyonuyla gizli olan pencereyi geri getiriyoruz. Animasyon hızı olarak “slow“, “normal” veya “fast” değerlerini kullanabilirz.
8: Fareyi linkin üzerinde çektiğimiz zaman yani mouseout() olduğunda açılan pencerenin kapanması için gereken fonksiyonu yazıyoruz. mouseover() fonksiyonunun döndürdüğü değer jQuery olduğu için mouseover().mouseout() şeklinde kullanabiliyoruz. Ardarda istediğimiz kadar fonksiyon tanımlayabiliriz. Tabi döndürdükleri değer jQuery olmak şartıyla.
9: Pencereyi gizlemek için fadeOut() fonksiyonunu kullanıyoruz.

Şimdi yaptığımız uygulamayı görebiliriz.

css dosyasında bazı değişiklikler yaparak tooltip’in farklı renklerde görünmesini sağlayabiliriz.

Farklı renkler için css kodlarını şu şekilde değiştirebiliriz:

kırmızı:

border:1px solid #C40505;
color:#C40505;
background-color:#F5C4C4;

yeşil:

border:1px solid #0D5708;
color:#0D5708;
background-color:#C8FBC4;

veya transparan bir arkaplan yapabiliriz. Bunun için background-color değerine herhangi birşey yazmayıp şu kodu ekleriz:

background-image:url("trasparan.png")

İkinci Uygulama

Bir önceki kısımda her link için bir div oluşturmuştuk. Bu bölümde bunları oluşturmayacağız. jQuery ile bir div oluşturup bu div’in içeriğini de linkin alt değeri yapacağız. Eğer tooltip olarak sadece düz bir metin görüntülememiz gerekiyorsa bu yöntem daha uygun olur.

Bunun için css kodlarında herhangi bir değişiklik yapmamıza gerek yok. Fakat Html kısmını şu şekilde yapmamız lazım. tooltipi olacak linkin class’ını “tip” yapıyoruz ve bir “alt” değeri atıyoruz. Örnekle görelim:

<a class="tip" alt="herhangi bir metin" href="#">link1</a>

jQuery kısmını da şöyle yapıyoruz:

$(document).ready(function(){
$("body").append('<div id="tooltip"></div>');
$("a.tip").mouseover(function(e){
e = e || window.event;
xx = e.pageX-10;
yy = e.pageY+30;
$("#tooltip").html($(this).attr("alt"));
$("#tooltip").css({"left":xx,"top":yy}).fadeIn("fast");
}).mouseout(function(){
$("#tooltip").fadeOut("fast");
});
});

2. satır: tooltipi göstereceğimiz div’i oluşturuyoruz. Bunu nereye oluşturduğumuz önemli değil. Çünkü koordinatları farenin koordinatları şeklinde değiştireceğiz.

3.satır: fare class’ı tip olan bir linkin üzerine geldiğinde oluşacak olaylar

7.satır: oluşturduğumuz div’in içeriğini linkin alt değeri yapıyoruz.

Geri kalan kısımlar aynı. Bu javascript kodlarını ayrı bir dosyaya koyup diğer projelerinizde de kullanabilirsiniz. Ama css kodlarını da dahil etmemiz lazım. Eğer bu kısmı da jQuery ile yapmak istersek  7. satırdan sonra şu kodları ekleyebiliriz:

$("#tooltip").css({
"z-index":1001,
"position":"absolute",
"padding":"5px",
"-moz-border-radius":"5px",
"border":"1px solid #0D5708",
"background-color":"#C8FBC4",
"color":"#0D5708",
"font-weight":"bold"
});

Bu kısmı da ekledikten sonra herhangi bir css dosyasına ihtiyacımız kalmadı. Sadece jQuery kodlarını kullanarak bir tooltip eklentisi yapmış olduk. jQuery kodlarının son hali şöyle oldu:

$(document).ready(function(){
$("body").append('<div id="tooltip"></div>');
$("a.tip").mouseover(function(e){
e = e || window.event;
xx = e.pageX;
yy = e.pageY+30;
$("#tooltip").html($(this).attr("alt"));
$("#tooltip").css({
"z-index":1001,
"position":"absolute",
"padding":"5px",
"-moz-border-radius":"5px",
"border":"1px solid #0D5708",
"background-color":"#C8FBC4",
"color":"#0D5708",
"font-weight":"bold"
});
$("#tooltip").css({"left":xx,"top":yy}).fadeIn("fast");
}).mouseout(function(){
$("#tooltip").fadeOut("fast");
});
});

Örnek uygulamayı şuradan ve şuradan görebilirsiniz.
Kaynak kodları da şuradan indirebilirsiniz.
Sadece bu kodlardan oluşan bir .js dosyasını sayfadan çağırarak basit bir tooltip yaptık. Zaman oldukça yeni yazılar da yayınlayacağım. Kolay gelsin.

Benzer yazılar:

• CSS Tooltip Örneği
• jQuery ile animasyonlu buton örneği
• jQuery ile dropdown menü yapımı
• jQuery ile Birkaç Basit Örnek