/Structring a tooltip javascript plugin

Structring a tooltip javascript plugin

Asalamu Alaikum,

This is Saad Talaat.

As the title says we are structuring a tooltip javascript plugin, but what is the point with that??
Actually it’s not about tooltips, I’ve been workin on that recently but after i got done was done with that…i found that it would benfit much people to get to know the javascript more :).and i found talking about my experience would help some people not to fall in these bugs..
Why i am not doing that with JQuery. cuz actually i am the type that like doing his own stuff!!

Anyway let’s start 🙂

First as a study to what tooltip do.
it appears only while mouse is over an titled element…but what we want is to create our own tooltip adjusted the way we like.

First we are gonna need our old getElementByClass.
for tooltip we need a function that creates a tooltip…a function that removes tooltip and a function that position tooltips and a function the initalize events.( the elements that are enabled to show the tooltips will be with class name)

to start with creating those Tooltips

function puttp(p){
var h=document.createElement(“p”);
h.innerHTML=innerHTML=p.attributes[‘title’].nodeValue;
title=p.attributes[‘title’].nodeValue;
p.attributes[‘title’].nodeValue=null;
h.setAttribute(“class”,”tooltip”);
document.body.appendChild(h);
}

Ok here is what we’ve done!!we are reciving one param which is the object that will use our tooltip. we created a paragraph element. and it’s text will be the param’s title. and we stored our title into a var named title and then we removed it from the old element so we won’t have multiple tooltips. and we setted the class attribute of the tooltip as tooltip so we can style it later

.tooltip{
position:absolute;
background:yellow;
padding:10px;
font:.8em verdana;
}

That was my style…it’s a bit simple you can change it the way you want.

function rmvtp(p){
var h=document.getElementsByClass(“tooltip”)[0];
document.body.removeChild(h);
p.setAttribute(“title”,title[title.length-1]);
title=undefined;
}

That is the removing function..it should take the element that has a current tooltip shown as a param. of course since we have one tooltip we need to call the 0-indexed element of our class array.then we will remove it from the body and we are gonna let our element to retrieve it’s old title attribute value.and we will reset our title variable…so far so good!!

function position(e){
var j=document.getElementsByClass(“tooltip”)[0];
j.style.top=e.clientY;
j.style.left=e.clientX;
}

This is the positioning function which is quite really easy :). we just will keep our absolute positioned tooltip to these coords.

function init(){
var i;
for(i=0;document.getElementsByClass(“tp”)[i];i++){
if(document.all){
document.getElementsByClass(“tp”)[i].attachEvent(“onmouseover”,function(){puttp(this)});
document.getElementsByClass(“tp”)[i].attachEvent(“mouseout”,function(){rmvtp(this)});
document.getElementsByClass(“tp”)[i].onmousemove=position;
}
if(document.getElementById){
document.getElementsByClass(“tp”)[i].addEventListener(“mouseover”,function(){puttp(this)},true);
document.getElementsByClass(“tp”)[i].addEventListener(“mouseout”,function(){rmvtp(this)},true);
document.getElementsByClass(“tp”)[i].onmousemove=position;
}
}
}

Then we are initializing our events to the objects. so as long as we have an array elements that holds a value loop.and then we intialize the events so if (document.all) it means if (our browser is IE) cuz document.all is a Microsoft Standard we attach events on the way they are attached on IE.
and if(document.getElementById) it means if(our browser is one of the good side (FF-Chrome-Opera-Safari) which use DOM standards) we attach events on the DOM standards way :).

And then invoke the function init or add it to load event to body.

Anyway our simple tooltip plugin won’t work with nested elements(if you nested an element which uses our tooltip in an element which does that too).
Because there is nothing to hold an extra tooltip data(we have one title variable) so if we hover the inside element with disabling bubbling in our EventListener it will show the inside tooltip but without restoring the parent’s title..so it’s title is lost so if we hover it again…we will be having an empty tooltip.but if we enabled bubbling.when we hover in the inside element the tooltip will be holding the parent’s title..cuz it’s the last it met.. and when we hover out…we will be having nothing.

So in this point an idea comes to your mind why not array??.and push and pull everytime we get inside an element

Actually this process in Javascript will be asynchronized so while we are pulling (or actually deleting) the last element we used javascript will be still holding this index’s value as undefined.and also when you are pulling the last title to restore it,cuz of being asynchronized you may be pulling the undefined element..on the other side the parent element will still be having the event triggered ON!! so it’s title won’t be restored…

so give it a thought till we meet in the next post 🙂 .