Kod Dokümantasyonu;
Bu kısımda kod hakkında teknik detaylar açıklanmaya çalışacaktır. Eğer ki işin teknik kısmı ile ilgilenmiyorsanız yada başlangıç seviyesinde bile Javascript bilginiz yoksa bu bölümü geçebilirsiniz.
Kodun ilk kısmında soultip için kullanılacak divlerin isimlerini tanımlıyoruz. divname ekranda görülen layerın id'si (ismi) divInnername ise yazının gözükeceği bölgenin ismi.
// Customizations;
var divname="soultip";
var divInnername="soultipinner";
Bu özellik aktif olursa (var fixed=true;) sayesinde mouse objenin üzerine geldiğinde SoulTip üzerine gelinen objeye göre otomatik bir konum alır ve bu objenin mouse bu objenin üzerinden gidene kadar da o konumu değiştirmez. Bunu true veya false olarak set edebilirsiniz.
//If this is true tooltips will not move and shown in fixed mode
var fixed=false;
Kodun kilit noktalarından biri bu kısım. Yeni versiyonda daha kolay kullanım için SoulTip HTML kodu Javascript içerisine gömüldü. Dolayısıyla artık SoulTip layerının HTML kodu JS dosyasının içinde yer alıyor. Aşağıdaki HTML kodunu istediğiniz şekilde değiştirerek kendi özel SoulTip inize sahip olabilirsiniz.
var soultip="<div id='soultip'><div id='soultipinner'></div></div>"
Örnek olarak aşağıdaki kod her SoulTip kutucuğunun başına "Detaylar" kelimesini eklemiş olacaktır.
var soultip="<div id='soultip'><strong>Detaylar</strong><hr><div id='soultipinner'></div></div>"
SoulTip Koordinatları sayesinde çıkacak tooltip kutularının CoordLeft ile soldan kaç pixel, CoordRight ile de sağdan kaç pixel uzakta olacağını belirtebilirsiniz. Kod içerisinde bu veriler ile otomatik oynansa dahi burada girilenler baz alınacaktır.
// Fix SoulTip Coordinates
var CoordLeft=10;
var CoordRight=-15;
Checkboxları gizleme işleminde kullanılan global bir Array.
// For Storing hidden selects
var hiddenTags = new Array();
fm_MXY() fonksiyonu size mouse' un sayfadaki X ve Y konumunu verir.
Fonksiyon : fm_MXY()
Değişkenler : XorY ("x" veya "y" olarak belirtmeniz gerekir)
Döndürdüğü Değer : Numerik olarak verilen değişkene göre mouse' un sayfadaki X veya Y konumunu verir.
function fm_MXY(XorY){ // Mouse Coords
var coord = 0;
XorY=="x"?coord = event.clientX + document.body.scrollLeft:coord =
event.clientY + document.body.scrollTop;
if(coord<0)coord=0;
return coord;
}
fm_help() fonksiyonu esas genel işlemlerin hepsini yapan temel fonksiyondur.
Fonksiyon : fm_help()
Döndürdüğü : SoulTip layerının konumunu değiştirir, üzerindeki objenin help özelliğinin değerini alır ve yazdırma fonksiyonunu (fm_writehelp()) çağırır.
function fm_help(){ // Show-Hide
var NewCoordLeft=0,NewCoordRight=0; // Yeni Koordinatları tanımlayıp sıfıra eşitliyoruz
var thisObj = getElementbyId(divname); // getElementbyId() aracılığı ile SoulTip' i ana divini alıyoruz
SoulTip'in browser kenarıdan görünürken taşmaması amacı ile bazı değişkenleri tanımlamamız gerekiyor. Önce aktif pencerenin boyutlarını almamız gerekiyor. Genişliği basit şekilde document.body.clientWidth ile alıyoruz.Uzunluğu ise document.body.clientHeight ile almamız yetmiyor. Çünkü sayfa boyutu scrollar dahil olmadan bize gelecektir. Bu yüzden mevcut boyut ile Scroollar' ın boyunu topluyoruz. Buna ek olarak ekstra kısımlar için bir default 25 pixel ekliyoruz. Son olarak bize gerekli uzunluk boyutunu document.body.clientHeight+document.body.scrollTop+25 ile elde etmiş oluyoruz.
var browserwidth=document.body.clientWidth; // Browser' ın genişliğini alıyoruz
var browserheight=document.body.clientHeight+document.body.scrollTop+25; // Browser' ın uzunluğunu alıyoruz
SoulTip özelleştirmeye açık bir sistem olduğundan dolayı kendi kutucuklarımızın boyutlarını bilemeyiz. Dolayısıyla kendi kutucuğumuzun boyutlarını tekrar offsetWidth (genişlik) ve offsetHeight (uzunluk) özellikleri ile alıyoruz. Hatırlarsanız getElementbyId() ile thisObj' yi SoulTip ana layerı için obje olarak tanımlamıştık. Dolayısıyla artık ona ulaşmak istediğimizde thisObj objesini kullanıcağız. 10 pixel lik oynamalar için aldığımız değerleri 10 pixel arttırıyoruz.
var soulwidth=thisObj.offsetWidth+10, soulheight=thisObj.offsetHeight+10; // Soultip sizes
Mouse' un üzerinde bulunuğu objeyi activeObj olarak alıyoruz.
var activeObj=window.event.srcElement; // Active Object
activeObj objesi aracılığı ile aktif objenin help tagını alıyoruz. Dolayısıyla eğer buradaki .help 'i değiştirirseniz objelerinizde kendi tagınızı kullanabilirsiniz. Mesela aşağıdaki kodda activeObj.help' i activeObj.soultip yaparsanız bundan sonra objelerinizde help özelliği yerine soultip özelliğini kullanabilirsiniz. <a href="#" soultip="soultip yardımı !">soultip özelliğini kullanarak</a>
var desc=activeObj.help; //help tag
Eğer bulunduğumuz objenin help tagı varsa yani desc boş değilse SoulTip için gerekli hazırlıklara başlayabiliriz.
if(desc!=null){ //Eğer desc boş değilse bu işlemleri yap
var x = fm_MXY("x"), y = fm_MXY("y");
if(document.alldesc==desc){ //If fixed
NewCoordLeft=activeObj.offsetLeft+activeObj.offsetWidth-x; // Aktif objenin genişlik ve uzunluğunu alalım
NewCoordRight=activeObj.offsetTop-y; // Uzunluğunu Alalım
}
Bundan sonra Yeni sol (NewCoordLeft) ve Üst (NewCoordRight) koordinatlarını oluşturuyoruz.Burada üsr koordinat değişken isminin NewCoordRight olduğuna bakılmamalıdır. O benim bir hatamdır ve bir daha da değiştirmey eüşendim, bir sonraki versiyona inşallah.
Koordinatları oluşturma mantığı;
Pseudo Kod (simülasyon kodu);
(Ana Layer Genişliği + Mouse' un pencerenin solundan olan uzaklığı) büyükse Pencerenin Genişliği Yeni koordinattan Ana Layer genişliği kadar çıkart. Aksi takdirde Yeni koordinat varsayılan uzaklık olsun.
Gerçek Kod (Formülasyon);
NewCoordLeft+=(x+soulwidth>browserwidth)?-soulwidth:CoordLeft;
aynı işlemi uzunluk içinde uygularız.
NewCoordLeft+=(x+soulwidth>browserwidth)?-soulwidth:CoordLeft; //fikir Yusuf Uğur Soysal - @hayalet
NewCoordRight+=(y+soulheight>browserheight)?-soulheight:CoordRight;
Ana Layer' ı (thisObj) bulduğumuz yeni koordinatlara taşırız.
thisObj.style.left=x+NewCoordLeft+"px"; //Move X
thisObj.style.top=y+NewCoordRight+"px"; //Move Y
fm_writehelp(desc); //tagın içerisindeki açıklamayı fm_writehelp yardımı ile yazdırırız.
hy_collusion(thisObj); //Layerın alrındaki selectnboxları sorun çıkarmaması amacı ile gizleriz
Eğer fixed mode aktifse (if(fixed)) açıklamayı cachemize alırız. Bir sonraki seferde hala aynı açıklama varsa SoulTip konumunu değiştirmeyecektir. Aynı açıklama içeren iki link arasında geçişte sorun çıkartma ihtimali olabilir. Ne kadar çok küçük bir ihtimal olsa da henüz bu tip bir soruna rastlanılmadı.
if(fixed)document.alldesc=desc; //cache for fixed
Eğer tanım boşsa aşağıdaki kod çalışır. Tanımın boş olmasının anlamı şu an SoulTip in ekranda görünmüyor olması anlamına gelir.
}else{
hy_collusionRecover(); //Gizlenmiş olan
thisObj.style.display="none"; // Ana Layer' ı gizle
}
Fonksiyon : fm_writehelp()
Döndürdüğü : Ana Layer' ı alır (thisObj) ve gösterir (thisObj.style.display="block"
ve altlayerın (innerObj) içerisine innerHTML ile verilen değişkenin (val) değerini yazar (innerObj.innerHTML=val;)
function fm_writehelp(val){ // Write Tip
var thisObj = getElementById(divname); // Get Main Div Object
var innerObj = getElementById(divInnername); // Get innerObject
innerObj.innerHTML=val;
thisObj.style.display="block";
}
hy_collusion() verilen objenin (obj) altında kalan bölgedeki selectboxların gözükmemesini sağlar. hy_collusionRecover() ise bu gizlenilen selectboxların işlem bitince tekrar görünmesi için kullanılır. Bu iki fonksiyon için tekrar Yusuf Uğur Soysal' a teşekkürler.
function hy_collusion(obj)
function hy_collusionRecover()
Mutlu Son !, Son olarak sayfaya önceden tanımladığımız HTML kodunu yazıyoruz (document.write(soultip)) ve onmousemove actionına fm_help() fonksiyonunu bağlıyoruz (document.onmousemove=fm_help;) . Bu işlem için sayfanın yüklenmesini beklememize gerek yok.
// ACTION | Grab mousemove and Write Soultip
document.write(soultip);
document.onmousemove=fm_help;
Konu: soultip ile olusturulan basit java script kodları 
