This is Saad Talaat.
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
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
That was my style…it’s a bit simple you can change it the way you want.
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!!
This is the positioning function which is quite really easy :). we just will keep our absolute positioned tooltip to these coords.
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
so give it a thought till we meet in the next post 🙂 .