Ali Görkem Çiçek

toolthumb

Jquery ile tooltip yapalım

Katagori: CSS, Dersler, Jquery | Tarih: 11 Mart 2011, 16:47

Web 2.0′ın getirdiği yeniliklerden en kullanışlı olanlarından birisi linkler de veya yazılar da açıklama, resim göstermesi gereken yerlere güzel görünüşlü bir “araç bilgisi” eklemek. Bu ders de Jquery kullanarak kolayca bir tooltip oluşturmanın yolunu göstereceğim.

İsterseniz nasıl yapacağımıza geçmeden önce size örnek birkaç örnek göstermek istiyorum.

Facebook’daki tooltip uygulaması:

Twitter’daki basit tooltip uygulaması:

Sanırım size ne yapmak istediğimi açıklayabildim. Artık parmaklar çalışmaya başlasın…

HTML kodlarımızı yazalım:

Sayfaya en son jquery sürümünü yüklüyoruz. Tooltip uyguladığımız yerlerde tooltip de görünmesini istediğiniz kodu yada yazıyı “title” değerine ekleyebilirsiniz ekleyebilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AliGorkem Tooltip Demo</title>
<!--Sayfaya jquery ekliyoruz-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
<!--javascript kodu-->
</script>
<style>
<!--css kodları-->
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, <a rel="tooltip" title="burayada tooltip yazımız gelir">consectetur</a> adipiscing elit. Vestibulum pellentesque, orci non pulvinar bibendum, <a rel="tooltip" title="<img src='toolimg.png'/>">resimli tooltip</a> justo mollis nisl, sed condimentum libero velit a ante. Nam dictum felis quis nunc malesuada gravida. Curabitur nec nisl tellus, a tincidunt leo. Fusce tempus neque lacus. Aenean eget orci vel nibh venenatis pretium aliquam.</p>
</body>
</html>

Css kodlarımızı yazalım:

Bura da tooltip’e position: absolute değer vermemizin nedeni tooltipin pozisyonunu jquery kodlarımız ile ayarlamak. 

.tooltip {
	position: absolute;
	top: 0;
	left: 0;
	color: #ffffff;
	font: 12px/120% arial;
}
.tooltipust {
	background: url(toolust.png) no-repeat;
	width: 100px;
	height: 14px;
}
.tooltipalt {
	background: url(toolalt.png) no-repeat;
	width: 100px;
	height: 14px;
}
.tooltiporta {
	background: url(toolorta.png);
	width: 92px;
	padding: 0 4px;
}

Jquery kodlarını yazalım

Burada jquery başlatma fonksiyonumuzu yazdık. Artık jquery kodlarını yazmaya hazırız.

$(function () {
<!--jquery kodlarımız-->
});

$(‘a[rel=tooltip]‘):Tooltip eklenmiş linkleri seçtik.
.mouseover(function(){: İstediğimiz alanın üzerine mouse ile geldiğin de istediğimiz kodları çalıştırıyor.
.mouseout(function(){: Mouse üzerinden çekildiğinde istediğimiz kodları çalıştırıyor.

$(function () {
	$('a[rel=tooltip]').mouseover(function(){

	}).mouseout(function(){

	});
});

Üzerine geldiğimiz alanın “title” değerini “tooltipyazisi” değişkenine atadık.

$('a[rel=tooltip]').mouseover(function(){
	var tooltipyazisi = $(this).attr('title');

Bir “tooltip” değişkeni yarattık ve bu değişkene tooltipimizin html kodlarını atadık. “Title” dan aldığımız değeri istediğimiz yere ekledik.

$('a[rel=tooltip]').mouseover(function(){
	var tooltipyazisi = $(this).attr('title');
	var tooltip = '<div class="tooltip"><div class="tooltipust"></div><div class="tooltiporta">'+tooltipyazisi+'</div><div class="tooltipalt"></div></div>';

Üzerine geldiğimiz alanın sayfada ki pozisyonunu “tooltippozisyon” değişkenine atadık ve “tooltip” değişkeninde hazırladığımız tooltip kodunu üzerine geldiğimiz alana ekledik.

$('a[rel=tooltip]').mouseover(function(){
	var tooltipyazisi = $(this).attr('title');
	var tooltip = '<div class="tooltip"><div class="tooltipust"></div><div class="tooltiporta">'+tooltipyazisi+'</div><div class="tooltipalt"></div></div>';
	var tooltippozisyon = $(this).position();
	$(this).append(tooltip);

Tooltipimizin pozisyonunu ayarlamak için üzerine geldiğimiz alanın yüksekliğini “alanyukseklik”, yarattığımız tooltip’imizin genişliğini “toolgenislik” ve yine üzerine geldiğimiz alanın genişliğini “alangenislik” değişkenine atadık. “tooltipleft” değişkeninde “toolgenislik” değişkeninde ki değerin yarısını buluyoruz(Yani tooltipimizin tam ortasını), “alangenislik” değişkeninin yarısını buluyoruz(üzerine geldiğimiz alanın tam ortası), ve çıkarıyoruz. Böylece yarattığımız tooltip’in sayfanın soluna olan mesafesini hesaplayacağız.

$('a[rel=tooltip]').mouseover(function(){
	var tooltipyazisi = $(this).attr('title');
	var tooltip = '<div class="tooltip"><div class="tooltipust"></div><div class="tooltiporta">'+tooltipyazisi+'</div><div class="tooltipalt"></div></div>';
	var tooltippozisyon = $(this).position();
	$(this).append(tooltip);
	var alanyukseklik = $(this).height();
	var toolgenislik = $('.tooltip').width();
	var alangenislik = $(this).width();
	var tooltipleft = (toolgenislik/2) - (alangenislik/2);

“tooltippozisyon” değişkenin de ne yaptığımızı üstte söylemiştim. Şimdi .css() fonksiyonu ile .tooltip’in pozisyonunu ayarlayacağız.
tooltipimizin top değerini “tooltippozisyon.top + alanyukseklik” yapıyoruz. Burada üzerine geldiğimiz alan ile sayfanın en üstü arasında ki mesafeyi ve üzerine geldiğimiz alanın yüksekliğini topluyoruz. Böylece tooltipimiz üzerine geldiğimiz yerin tam altında çıkacak.
tooltipimizin left değerini ise “tooltippozisyon.left – tooltipleft” yapıyoruz. “tooltippozisyon.left” ile üzerine geldiğimiz alanın sola olan mesafesinden yukarıda yarattığımız “tooltipleft” değişkenini çıkarıyoruz. Burada çıkarmamızın nedeni, “tooltipleft” değişkenin de tooltipimizin sağa taşma miktarını hesaplamıştık burada onu çıkararak tooltipimizi üzerine geldiğimiz alanın ortasına yerleştirmek.

$('a[rel=tooltip]').mouseover(function(){
	var tooltipyazisi = $(this).attr('title');
	var tooltip = '<div class="tooltip"><div class="tooltipust"></div><div class="tooltiporta">'+tooltipyazisi+'</div><div class="tooltipalt"></div></div>';
	var tooltippozisyon = $(this).position();
	$(this).append(tooltip);
	var alanyukseklik = $(this).height();
	var toolgenislik = $('.tooltip').width();
	var alangenislik = $(this).width();
	var tooltipleft = (toolgenislik/2) - (alangenislik/2);
	$('.tooltip').css('top', tooltippozisyon.top + alanyukseklik);
	$('.tooltip').css('left', tooltippozisyon.left - tooltipleft);

Burdan sonra pek bir şey kalmadı. Tooltipimizi önce “hide()” fonksiyonu ile gizliyoruz sonra “fadeIn()” fonksiyonu ile üzerine geldiğimizde efektif bir şekilde çıkmasını sağlıyoruz. “attr” fonksiyonu ile “title” değerini boşaltıyoruz çünkü bazı tarayıcılar “title” değerini önceki değerin üstüne ekliyor ve hatalar oluşuyor.

$('a[rel=tooltip]').mouseover(function(){
	var tooltipyazisi = $(this).attr('title');
	var tooltip = '<div class="tooltip"><div class="tooltipust"></div><div class="tooltiporta">'+tooltipyazisi+'</div><div class="tooltipalt"></div></div>';
	var tooltippozisyon = $(this).position();
	$(this).append(tooltip);
	var alanyukseklik = $(this).height();
	var toolgenislik = $('.tooltip').width();
	var alangenislik = $(this).width();
	var tooltipleft = (toolgenislik/2) - (alangenislik/2);
	$('.tooltip').css('top', tooltippozisyon.top + alanyukseklik);
	$('.tooltip').css('left', tooltippozisyon.left - tooltipleft);
	$('.tooltip').hide();
	$('.tooltip').fadeIn('slow');
	$(this).attr('title', '');

Ve jquery kodumuzun son hali. Son olarak mouse alanın üzerinden çekildiğinde olacak şeyleri yapıyoruz. Önceden tarayıcı hataları oluşmaması için boşaltığımız “title” değerini yeniden ekledik. Ve remove fonksiyonu ile önceden eklediğimiz tüm tooltip kodlarını siliyoruz.(Burada “children()” fonksiyonu üzerine geldiğimiz div’in içindeki istediğimiz seçiciyi seçmeye yarıyor. Biz burada eklediğimiz tooltip kodunu seçiyoruz.)

$(function () {
	$('a[rel=tooltip]').mouseover(function(){
		var tooltipyazisi = $(this).attr('title');
		var tooltip = '<div class="tooltip"><div class="tooltipust"></div><div class="tooltiporta">'+tooltipyazisi+'</div><div class="tooltipalt"></div></div>';
		var tooltippozisyon = $(this).position();
		$(this).append(tooltip);
		var alanyukseklik = $(this).height();
		var toolgenislik = $('.tooltip').width();
		var alangenislik = $(this).width();
		var tooltipleft = (toolgenislik/2) - (alangenislik/2);
		$(this).append(tooltip);
		$('.tooltip').css('top', tooltippozisyon.top + alanyukseklik);
		$('.tooltip').css('left', tooltippozisyon.left - tooltipleft);
		$('.tooltip').hide();
		$('.tooltip').fadeIn('slow');
		$(this).attr('title', '');
	}).mouseout(function(){
		$(this).attr('title',$('.tooltiporta').html());
		$(this).children('div.tooltip').remove();
	});

Tebrikler artık size ait bir tooltipiniz var :) .

Demo için buraya tıklaya bilir. Dosyaları indirmek için buraya tıklayabilirsiniz. Yorumlar da anlamadığınız yerleri sorabilirsiniz. Hatta bana yararı dokunması açısından “şunu nasıl yaparız” soruları istiyorum yoksa yapacak bir şey bulamıyorum. :)

Yorumlar:

Yazıya Gelen Yorumlar

1

Musa
12 Mart 2011´de söylemiş


demoları çok seviyorum

2

ibrahim
14 Mart 2011´de söylemiş


güzel yazı emeğine sağlık

3

Agorkem
15 Mart 2011´de söylemiş


Teşekkürler

4

Ahmet
24 Haziran 2011´de söylemiş


tek kelimeyle muhteşem bir örnek. fakat bir hata tespit ettim. internet explorer'de linkler üzerinde biraz gezindikten sonra undefined hatası almaktayım bilginiz olsun.. emeğinize sağlık…

Düşüncelerinizi duymaya ihtiyacım var!

Zamanınızın çok küçük bir bölümünü ayırarak, bu form aracılığı ile yazı hakkındaki düşüncelerinizi paylaşabilirsiniz.

Yorum yazarken kullanabileceğiniz XHTML etiketlerini görmek istermisiniz?

Aşağıdaki XHTML etiketlerini kullanabilirsiniz:
<a href="" title=""></a>
<abbr title=""></abbr>
<acronym title=""></acronym>
<b></b>
<blockquote cite=""></blockquote>
<cite></cite>
<code></code>
<del datetime=""></del>
<em></em>
<i></i>
<q cite=""></q>
<strike></strike>
<strong></strong>

Takip Et

RSS RSS 2.0

Son Dersler

jquerytabJquery ile tab uygulaması nasıl yapılır? toolthumbJquery ile tooltip yapalım

Tavsiye ettiklerim