Tooltip a DIV through DOM/Javascript

Tooltip a DIV through DOM/Javascript
Simple concept of tool tipping an element via DOM/javascript.


Introduction

Hi Fellow developers, many developers today not only use one language to get the job done,
Thats right ... we all have to adapt to the ever changing environment of the web 2.0 today, one of the
many available languages with powerful effect's is my personal Favorite (javascript) & the DOM.
(Document Object Model)
I won't go right into the theory behind these, but just to cover the basic idea for those whom are
unaware so you get a little undertsnading of whats going on the DOM is:

HTML DOM is a W3C standard and it is an abbreviation for the Document Object Model for HTML, The
HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate
HTML documents. As we all know HTML elements , along with their containing text and attributes, can
be accessed through the DOM via javascript and then the contents can be modified or deleted, even
new elements can be created dynamically on the fly. The best thing about HTML DOM is the fact that
it's platform and language independent, It can be used by any programming language like Java,
JavaScript, and VBScript.

Now moving along let me show you a simple way i learnt through practice & playing around alot to add
a simple tooltip effect to a DIV element in such a suprising little amount of code.

No more blabber lets begin.


Main

Step 1:
Start a standard webpage HTML document, & in the element begin by adding 2

elements as so shown below along with their code.
Color and style our 1st DIV Or the element we want to mouse over and get our tooltip effect, it needs
just be a simple block element Note: this doesn't have to be a DIV it can be almost any DOM element
that you can attach onmouseover events to eg;

, ,

,