Basit jQuery Eklentileri Yazıyoruz : Tooltip

Merhaba Arkadaşlar,

Eğitim serimizin bu makalesinde sizlere bir tooltip eklentisinin nasıl yazılacağını , nasıl çalıştırılacağını ve Html düzeninin nasıl olması gerektiğini anlatacağım. Bu makale sonunda sizlerde bilgi baloncukları olarak kullanılan Tooltip’ leri belli bir düzende oluşturarak projeleriniz içerisinde tek bir eklenti vasıtası ile kullanabileceksiniz.

Benim şimdiye kadar karşılaştığım tooltip şekilleri; Sosyal medya ikonlarına yapılan hover işlemleri , E-ticaret sitelerinde ürünlere yapılan hover işlemleri , Sözlük tarzı içerik sağlayan internet sitelerinde kelime veya cümlelerin ne anlama geldiği ile ilgili içerik alanlarından oluşmaktadır. Zaten kullanım amacına baktığımızda da her zaman için önümüze bu tarz işlemlerde çıkacaktır.

Dökümantasyon tadında sonlandırılacak olan bu makalede sizlere yapılabilecek en kısa ve en kolay tooltip eklentisini oluşturarak kod yapılarını veriyorum. İyi Çalışmalar..

tooltip.js


(function($){
    $.fn.tooltip = function(){
        return this.each(function(){
            var a = $(".tooltip-area");
            var b = $(".tooltip");
            $(document).ready(function(){
            $(a).hover(function(){
               $(this).find(b).css({'display':'block'});
            },function(){
                $(this).find(b).css({'display':'none'});
            });
        });
        });
    };
})(jQuery);

css


.tooltip-area{position: relative; float: left; margin-right: 20px;}
.tooltip-area img{width: 300px; height: 200px;}
.tooltip{display: none; padding: 20px; background: #333; border-radius: 20px; color: #fff; position: absolute; bottom: -60px; box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.1);animation:one 1s;-webkit-animation:one 1s;-moz-animation:one 1s;-o-animation:one 1s;-ms-animation:one 1s;}
.tooltip i{width: 10px; height: 5px; background: url('ok.jpg') no-repeat; position: absolute; left: 45%; top: -5px;}
@keyframes one{from {opacity:0;}to {opacity:1;}}
@-webkit-keyframes one {from {opacity:0;}to {opacity:1;}}
@-moz-keyframes one {from {opacity:0;}to {opacity:1;}}
@-o-keyframes one {from {opacity:0;}to {opacity:1;}}
@-ms-keyframes one {from {opacity:0;}to {opacity:1;}}

html


<div class="tooltip-area"><img src="Taksim.jpg" /><div class="tooltip">Taksim Meydanı<i></i></div></div>
<div class="tooltip-area"><img src="gulhane.jpg" /><div class="tooltip">Gülhane Parkı<i></i></div></div>
<div class="tooltip-area"><img src="kadikoy.jpg" /><div class="tooltip">Kadıköy İskelesi<i></i></div></div>

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 42 No ‘lu Maddeden İndirebilirsiniz..

Reklam

Tüm Yorumlar

Leave a Reply

Your email address will not be published. Required fields are marked *