Jquery TipTip Tooltip Eklentisi (Ajax Tooltip)

Merhaba Değerli arkadaşlar, yabancı bir sitede bulduğum tooltip eklentisini tanıtacağım size 🙂 Bu eklenti ile html sayfalarınızda veya web sitenizdeki title olan her kısımda çıkan tooltip’i daha görsel hala getirecektir. Günümüzde artık popüler her sitede jquery sayfanın her yerinde var ve tooltip kısmı bile daha görsel olduğunu görüyorsunuzdur zaten.


Demo için : Jquery TipTip Tooltip Eklentisi (Ajax Tooltip)

Sayfamızda Jquery kullanacağımız için jquery kütüphanesini head taglarının arasına yazıp sayfamıza çekiyoruz.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Yine head tagları arasına aşağıdaki kodları yazıyoruz ve sayfamıza jquery.tipTip.js, jquery.tipTip.minified.js ve tipTip.css dosyalarını çekmiş oluyoruz.

<script type="text/javascript" src="jquery.tipTip.js"></script>
<script type="text/javascript" src="jquery.tipTip.minified.js"></script>
<link type="text/css" rel="stylesheet" href="tipTip.css" />
<script type='text/javascript'> 
jQuery.noConflict();
jQuery(function() {
jQuery("a").tipTip({maxWidth: "auto", edgeOffset: 8,gravity: 'n'});
jQuery("img").tipTip({maxWidth: "auto", edgeOffset: 8,gravity: 'n'});
  });
</script>

Örnek html kullanımı için ;

<a title="AtknUludag.Com" href="http://www.atknuludag.com">AtknUludag.Com</a>

Yukarıdaki kodda gördüğünüz gibi title kısmı var. Title kısmında ne yazılı ise tiptip tooltip’de o gözükecektir. Yine aynı şekilde resim kodunda da title kısmı var ise aynı şekilde o da gözükecektir

Ayrıca tiptip eklentisinde birkaç ayarlamalar var. Bunları aşağıdaki kısımları değiştirerek yapabilirsiniz. Örnek olarak Jquer(“a”) ve jQuery(“img”) kısmı var. Yani linklerde ki title kısımlarında ve resimlerdeki title kısımlarında çalışacak şekilde ayarlanmış bulunmakta. Mesela span title veya p title yaparsak tiptip tooltip plugini gözükmeyebilir.

<script type='text/javascript'> 
jQuery.noConflict();
jQuery(function() {
jQuery("a").tipTip({maxWidth: "auto", edgeOffset: 8,gravity: 'n'});
jQuery("img").tipTip({maxWidth: "auto", edgeOffset: 8,gravity: 'n'});
  });
</script>

O yüzden aşağıdaki kodları eklememiz gerek. Ayrıca edgeOffset ile ne kadar uzaklıkta olacağını ayarlayabiliyoruz. Tooltip tiptip jquery plugin’nin demosunu görmek ve diğer ayarlar için burayı ziyaret ediniz.

jQuery("p").tipTip({maxWidth: "auto", edgeOffset: 8,gravity: 'n'});
jQuery("span").tipTip({maxWidth: "auto", edgeOffset: 8,gravity: 'n'});
Jquery TipTip Tooltip Eklentisi
Html ve Jquery

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.