$(document).ready(function() {
//Tüm tooltip class'ındaki verileri seçiyoruz
$('.tooltip').mouseover(function(e) {
//Söz konusu verideki title'ın içeriğini veriye aktarıyoruz
var tip = $(this).attr('title');
//Taraıyıcının title için normalde yaptığı şeyi engelliyoruz
$(this).attr('title','');
//Yeni tooltip ayarlarımızı oluşturuyoruz
$(this).append('' + tip + '');
//fadeIn efektiyletooltip'in görünmesini sağlıyoruz
$('#tooltip').fadeIn('500');
$('#tooltip').fadeTo('10',0.9);
}).mousemove(function(e) {
//Tooltip'in mouse il beraber hareket etmesini sağlıyoruz
$('#tooltip').css('top', e.pageY + 10 );
$('#tooltip').css('left', e.pageX + 20 );
}).mouseout(function() {
$(this).attr('title',$('.tipBody').html());
$(this).children('div#tooltip').remove();
});
});En üst satırda .tooltip yazılan alana dikkat: Bu alan CSS dosyalarındaki seçiciye benzer. Ben HTML’de class’ına tooltip yazdığım tüm dosyalarda olması için öyle yazdım. Mesela siz de bir formda metin alanları için tooltip yapacaksanız oraya input gibi şeyler de yazabilirsiniz.
Buna bir de stil çalışması yapmamız gerekiyor. Ben böyle yazdım, position ve z-index ayarları olduğu gibi kaldıkça tooltip çalışacaktır.
/* Tooltip */
#tooltip {
position:absolute;
z-index:9999;
color:#fff;
font-size:12px;
padding: 5px 10px 5px 10px;
background: rgba(42,86,149,0.90);
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 8px;
-moz-border-radius-topleft: 0;
border-radius: 8px;
border-top-left-radius: 0;
}Arkaplan saydamlığını rgba() alanında sonda 0.90 yazan kısımdan değiştirebilirsiniz. HTML5 olduklarından sadece güncel tarayıcılarda çalışabilirler.
Son olarak HTML’de bunları uygulamamız gerekiyor:
Üzerine gelinecek yazı
Deneme dosyası (rar şifresi: www.mrtcntn.com) indirmek için tıklayın.
Kaynak: http://www.mrtcntn.com/jquery-ile-bilgi-balonu-yapimi/
