JavaScript ile Tooltip Yapalım

admin — Sat, 02 May 2009 16:09:46 +0000

HTML taglarındaki elemanların title özelliği sayesinde eleman hakkında bilgi gösterebiliyoruz. Ancak bu görünüm sadece yazılardan oluşabiliyor. Ancak siz bilgi gösterirken html kodu kullanarak resim,link ve birden fazla satır göstermek istiyorsunuz. Bunun için javascript kullanabilirsiniz. Ben bu anlattığımı yapan bir tooltip geliştirdim.

Şimdi kodlara geçelim.

Önce basit bir html sayfası oluşturarak tooltipimizi kullanacak elemanı yaratıyoruz.



Javascript Tooltip

Fare ile sayfamızdaki nesnenin üzerine gelince görünen yazı tahmin edildiği gibi şu şekilde olacaktır :

Bunu daha görsel hale getirmeye çalışacağız. Yazı sonunda öğrendiklerimizle sonucu şu hale getirebileceğiz.

tooltip.js dosyamızın içinde tooltip adında bir fonksiyon oluşturacağız. işimizi yapan fonksiyon bu olacak.

 
function tooltip(nesne,zamanasimi,tipwidth,sinif) {
	var tip = {
		mesaj : null,
		nesne : null,
		temp : null
	}
 
	tip.mesaj = nesne.title;
	tip.temp = nesne.title;
	nesne.title="";
	nesne.style.cursor="help";
	tip.nesne = document.createElement("div");
	if(sinif) {tip.nesne.className=sinif;} else {tip.nesne.className="toolbox";}
 
	with(tip.nesne.style) {
		position	= "absolute";
		left		= stil_al(nesne,"left");
		top		= stil_al(nesne,"top");
		width		= tipwidth||'auto';
		display	= "none";
	}
	tip.nesne.innerHTML = tip.mesaj;
 
	document.body.appendChild(tip.nesne);
	setTimeout(function(){tip.nesne.style.display="inline"},zamanasimi||0);
	nesne.onmousemove = function(e) {
		e = window.event||e;
		tip.nesne.style.left = (e.clientX)+"px";
		tip.nesne.style.top = (e.clientY)+"px";
	}
	nesne.onmouseout = function() {
		tip.nesne.parentNode.removeChild(tip.nesne);
		if(tip.temp!=null) {nesne.title=tip.temp;}
	}
}

Fonksiyonumuz yukarıdaki gibidir. Fonksiyonumuzu kullanırken lazım olacak olan stil_al fonksiyonu önceki makalede anlatılmıştır. Bu fonksiyon html elemanının dökümandaki sitil ya da konum bilgilerini almaya yarıyor.

stil_al fonksiyonumuz :

function stil_al(nesne,ozellik) {
	sonuc = '';
	// Eğer internet exploer ise ve ozellik opacity ise
	if(document.all && ozellik=='opacity') {
		// ozellik değerini değiştir ve filter yap.
		ozellik = 'filter';
	}
	if(nesne.currentStyle) {
		// ozellik içinde - geçiyorsa tireyi sil ve tireden sonraki ilk harfi büyüt.
		ozellik = ozellik.replace(/\-(\w)/g, function (icerik_match, p1){return p1.toUpperCase();});
		sonuc = nesne.currentStyle[ozellik];
	} else {
		sonuc = document.defaultView.getComputedStyle(nesne, "").getPropertyValue(ozellik);
	}
	return sonuc;
}

Şimdi tooltip fonksiyonunun anlatımına geçelim.

fonksiyonumuz şu argümanları alıyor:
nesne = aktif nesne,
zamanasimi = ne kadar zaman sonra mesaj kutusu gösterilecek,
tipwidth = gösterilen mesaj kutusunun genişliğini belirtebiliriz,
sinif = gösterilen mesaj kutusuna bir css sitil sınıfı atayarak her mesaj kutusunda farklı görselliğe sahip kutular oluşturabileceğiz.

	var tip = {
		mesaj : null,
		nesne : null,
		temp : null
	}

Bu kısımda tip adında 3 özellikli bir nesne oluşturuyoruz. Bu nesne tooltip bilgilerini kaydetmede işimize yarayacak.

	tip.mesaj = nesne.title;
	tip.temp = nesne.title;
	nesne.title="";
	nesne.style.cursor="help";
	tip.nesne = document.createElement("div");
	if(sinif) {tip.nesne.className=sinif;} else {tip.nesne.className="toolbox";}

Bu kısımda tip nesnemizin mesaj ve temp değerini fonksiyona ilk argümanda geçirilmiş nesnenin title özelliğinden alıyoruz.
mesaj özelliği üzerinde işlemler yapacağımız için bir de temp değeri oluşturduk ve temp değeri orjinal mesajı tutacak. Buradaki amaç fare nesne üzerinden ayrıldıktan sonra nesnenin title özelliğine ilk değeri tekrar atmaktır.
ilk argümandaki nesnenin üzerine fare gelince bizim gösterdiğimiz mesajla birlikte kendi orjinal mesajını göstermesin diye nesnemizin title özelliğine boş (null) veriyoruz. nesnemizin üzerine fare geldiğinde cursor’u help olarak değiştiriyoruz ve daha anlamlı bir görsel haline getirmiş oluyoruz.
tip nesnemizin nesne özelliğine yeni oluşturduğumuz bir div elementi geçiriyoz. Sahte title olarak kullanacağımız eleman (mesaj kutusu da diyebiliriz) burada oluşturulmuş oluyor.
Eğer 4. argüman olan sinif değeri girilmişse mesaj kutusu olarak kullanacağımız tip.nesne’nin css sınıfını (className) sinif olarak giriyoruz. Eğer girilmemişse varsayılan olarak mesaj kutumuzun css sınıfını toolbox olarak belirliyoruz.

	with(tip.nesne.style) {
		position	= "absolute";
		left		= stil_al(nesne,"left");
		top		= stil_al(nesne,"top");
		width		= tipwidth||'auto';
		display	= "none";
	}
	tip.nesne.innerHTML = tip.mesaj;
	document.body.appendChild(tip.nesne);

Burada tip nesnemizin nesne özelliğinde sakladığımız mesaj kutumuzun zorunlu bazı konumlandırma ve sitil özelliklerini belirliyoruz.
position = “absolute”; // mesaj kutumuzun hareket etmesi için diğer elementlerden bağımsız olması gerekiyor. bu yüzden absolute verdik.
left ve top değerlerine ilk argümanla girilmiş html nesnesinin left ve top özelliklerini atadık.
width değerine 3. argümanla girilmiş width değerini yada 3. argüman girilmemişse auto (otomatik oluştur) değerini verdik.
display özelliğine none vererek oluşturduğumuz mesaj kutusunun gösterilmemesini sağladık. Buradaki amaç fonksiyonun bizim belirlediğimiz ve fonksiyonumuza 2. argüman olarak girilen zaman aşımı değerine göre gösterilmesi.

Daha sonra mesaj kutusu olarak kullandığımız tip.nesne’nin innerHTML yani html içeriğini fonksiyonun ilk satırlarında belirlediğimiz ve ilk argümanla girilmiş ana nesnemizin title değerini içeren tip.mesaj değerini verdik.
document.body.appendChild(tip.nesne); ile mesaj kutumuz olan tip.nesne’yi dökümanımızın gövdesine (body) ekledik.

Buraya kadar istediğimiz mesaj kutusunu oluşturduk. Mesaj kutusunu ana nesnemize göre konumlandırdık. Ana nesnemizin title özelliğini boşaltarak ikinci bir mesaj gösterilmesini engelledik. Enson olarak nesnemizi dökümanımıza dahil ettik.

Buradan sonra ise gösterilen mesaj kutusunun fare koordinatlarına göre hareket ettirmek ve gösterilecek mesaj kutusunun zaman aşımı işlemini yapmak kaldı. Bu işlemlerin ardından da farenin ana nesne üzerinden gittiğinde fonksiyonumuzun ilk satırlarında oluşturduğumuz mesaj kutusunu silme işlemi yapılacak.

	setTimeout(function(){tip.nesne.style.display="inline"},zamanasimi||0);
	nesne.onmousemove = function(e) {
		e = window.event||e;
		tip.nesne.style.left = (e.clientX)+"px";
		tip.nesne.style.top = (e.clientY)+"px";
	}
	nesne.onmouseout = function() {
		tip.nesne.parentNode.removeChild(tip.nesne);
		if(tip.temp!=null) {nesne.title=tip.temp;}
	}

İlk satırda setTimeout ile eğer son argüman olan zaman aşımı değeri verilmişse bu değer, verilmemişse 0 (sıfır) değerini geçirerek mesaj kutumuz olan tip.nesne’nin gösterilmesini sağladık.

Fonksiyonumuza ilk argüman olarak girilmiş ana nesnemiz olan nesne’nin onmousemove olayına fare koordinatlarını (e.clientX ve e.clientY) kullanarak mesaj kutumuzun dökümandaki konumunu değiştirebilen bir kaç özellik yazdık.
onmouseout olayına (fare ana nesne üzerinden gitmişse) ise mesaj kutumuzu yok eden kodları yazdık ve gene bu olayın içine tüm işlemler bittikten sonra ana nesnemizin title özelliğine orjinal mesajımızı (tip.temp) aktardır. Böylelikle fare ana eleman üzerinden ayrılıp tekrar geldiğinde tüm işlemler baştan eksiksik yapılması sağlandı.

Tüm bu işlemler ile birlikte istediğimizi yaptık. Ama mesaj kutumuzun sitil özelliklerini değiştirmemizde bize görsel açıdan yarar sağlayacaktır. Bunun için html dosyamızda içeri aldığımız tooltip.css dosyasına bir kaç satır css kodu yazmamız gerekiyor.
Örnek :

#nesne {
	width:100px;
	height:50px;
	border:1px solid #000;
}
.toolbox {
	display:inline;
	padding:6px;
	margin:18px 8px;
	background-color:#fff;
	border:1px solid #000;
	font-family:Tahoma;
	font-size:12px;
	opacity:0.9;
	filter:alpha(opacity=90);
}

Anlatım sonucunda oluşturduğumuz dosyalara buradan ulaşabilirsiniz.
HTML Dosyası
Javascript Dosyası
CSS Dosyası

Gökhan Bora » konumlandırma

JavaScript ile Tooltip Yapalım