Web sayfalarını hazırlarken kimi zaman yerden kazanmak için, kimi zaman bilinmeyen bir terimi açıklama için, kimi zaman da yapılması gerekenleri anlatmak için, arayüz tasarımcıları bolca araç ipucu baloncuklarını kullanırlar. Genel olarak metin bazlı içeriğe sahip olan bu araç ipuçları, tasarıma ve kullanım yerlerine göre farklı içerik ve görünümlere sahip oluyorlar. Hepsinin bilinen ortak özellikleri arasında ise, metin bazlı içerik, fare ilgili alan üzerine gelince görünme bulunuyor. Kullanışlı olduğunu düşündüğümüz jQuery javascript kütüphanesi kullanılarak hazırlanmış 11 tane araç ipucu eklentisini derledik.

1. Sticky Tooltip

Dynamic Drive sitesinden yayınlanan Sticky Tooltip eklentisi.

Ekstralar

• ipucu balonu içerisinde resim gösterilebiliyor.
• ipucu balonu farenin hareketini takip edebiliyor.
• ipucu balonu açıkken “s” harfine basıldığında ya da sağ fare tuşuna tıklandığında ipucu balonu açık kalabiliyor.

Demo ve İndirme : http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm

2. clueTip

Learning jQuery sitesinde yayınlanan clueTip eklentisi

Ekstralar

• Açılan ipucu balonunda başlık gösterilebiliyor.
• Yazı içerisinde resim gösterilebiliyor.
• Yazı üzerine gelme ve tıklama olarak iki farklı şekilde tooltip açılabiliyor.
• Açılan ipucu balonu için kapa butonu eklenebiliyor.

Demo : http://plugins.learningjquery.com/cluetip/demo/
İndirme : http://plugins.jquery.com/project/cluetip/

3. fTip

Oldukça basit çalışan fTip eklentisi, fare ile hedefin üzerine geldiğinizde aktif oluyor. CSS ile yazı tipi ve rengi değişikliği yapılabiliyor. Çok fazla özelleştirme imkanı yok.

Demo : http://voveris.eu/ftip-demo/
İndirme : http://plugins.jquery.com/node/9521/release

4. jQuery ToolTip

Jörn Zaefferer’in hazırladığı birçok jQuery eklentisinden biri olan jQuery ToolTip, ilk jQuery ipucu balonu eklentilerinden biri.

Ekstralar

• Resim gösterebiliyor.
• CSS sınıf ataması yapılabiliyor, böylece farklı ipucu balonu görünümü sağlanabiliyor.
• Tooltip için genişlik ve pozisyon tanımlanabiliyor.

Demo : http://jquery.bassistance.de/tooltip/demo/
İndirme : http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

5. Easy Tooltip

Alen Grakalic‘in hazırladığı ve daha sonra Easy Front-End içerisine eklediği Easy Tooltip eklentisi.

Ekstralar

• ipucu balonunun kapama şekli belirlenebilir. (fare uzaklaşınca ya da kapama tuşuna basınca)
• ipucu balonu içeriğini sayfa içerisindeki istenilen bir elemandan alabiliyor. (standart içerik elemanın “title” özelliğinden alınıyor)

Demo ve İndirme : http://cssglobe.com/post/4380/easy-tooltip–jquery-plugin

6. qTip

Oldukça gelişmiş kabul edebileceğimiz ve bir çok özelliği değiştirebilen bir jQuery ipucu balonu eklentisi qTip.

Ekstralar

• ipucu balonu pencerelerinin köşeleri yuvarlanabiliyor.
• konuşma balonu şeklinde yazıya yakın ucunda “ok” gözüküyor ve bu balonun yeri ayarlanabiliyor.
• Resim ve dinamik içerik gösterebiliyor.

Demo : http://craigsworks.com/projects/qtip/demos/
İndirme : http://craigsworks.com/projects/qtip/download/

7. tipsy

Tipsy genel anlamda, facebook ipucu balonlarının bir klonu. Facebooktaki ipucu balonlarının çalışmasına benzer şekilde çalışıyor.

Ekstralar

• ipucu balonunun açılma yeri belirlenebiliyor (üst, alt, sağ, sol)
• ipucu balonu animasyon şekilde açılıp kapanabiliyor.
• ipucu balonu içeriği için standart olarak “title” özelliğinden gelen içerik yerine başka içerik atanabiliyor.

Demo ve İndirme : http://onehackoranother.com/projects/jquery/tipsy/

8. jTip

jTip, clueTip ile hemen hemen aynı özelliklere sahip.

Ekstralar

• ipucu balonuna başlık satırı eklenebiliyor
• ipucu balonu içerisinde resim gösterilebiliyor.
• başka bir sayfanın içeriği, ipucu balonu içeriği olarak gösterilebiliyor.

Demo ve İndirme : http://www.codylindley.com/blogstuff/js/jtip/

9. Coda Popup

Coda Popup, Panic firmasının Mac Os X için hazırlamış olduğu popüler Coda Html editörünün tanıtım sayfasında kullandığı ipucu eklentisinin klonu.

Ekstralar

• ipucu balonu gözükmesi ve kaybolması animasyonlu olarak yapılıyor.

Demo : http://jqueryfordesigners.com/demo/coda-bubble.html
İndirme : http://jqueryfordesigners.com/coda-popup-bubbles/

10. vTip

vTip oldukça küçük bir ipucu balonu eklentisi.

Demo : http://www.vertigo-project.com/files/vTip/example.html
İndirme : http://www.vertigo-project.com/projects/vtip

11. bcToolTip

bcToolTip nispeten küçük bir ipucu balonu eklentisi. İçerik olarak şimdilik sadece elemanın title özelliğinden gelen metni gösterebiliyor.

Ekstralar

• ipucu balonunun elemana göre açılma pozisyonu hem yatayda (sağ, sol, orta), hem de düşeyde (üst, alt, orta) ayrı ayrı ayarlanabiliyor.
• ipucu balonunun fareyi takip edip etmeyeceği belirtilebiliyor.

Demo ve İndirme : http://bcinarli.com/experiments/bctooltip/