Simple Tooltips with Span tags

It's pretty amazing what you can do with tooltip scripts - but it does depend on the script you use. Some are very complex and bulky and do require some Javascript knowledge. 
After testing half a dozen free scripts the one I've settled on and used for all the above examples is BoxOver. It's lightweight, cross-browser compatible and best of all, so simple to use. All you need to do is to download and import the .js script into your web; add a script path statement either in the <head> or <body> of your pages and then create your tooltips like so:

<span title="header=[h text] body=[b text]">T Text</span>

the result is :
T Text

The "h text" you replace with what you wish to appear in the header cell and "b text" should be replaced with the text you wish to appear in the cell beneath it. The "T Text" is the trigger item that will generate the tooltip popup - this can be just text or an image. You can also use HTML in "h text" and "b text"



<span title="ISN'T THIS SOOOOOO COOL!"><b>HOVER YOUR MOUSE HERE.</b></span>
the result is :

HOVER YOUR MOUSE HERE.


To add an alt tag to a text link would be like this;
<span><a href="index.html" title="this is so cool" target="_blank">Click Here For Hypergurl</a></span>

Click Here For Hypergurl
another advance example is :
<span onMouseOver="document.pic1.src='http://www.hypergurl.com/images/bluepic2.gif'" onMouseOut="document.pic1.src='http://www.hypergurl.com/images/bluepic1.gif'"><img src="bluepic1.gif" height="40" width="100" name="pic1"></SPAN>


and you can combine the code with these examples :
<span style="background-color: #FFFF00">You can highlight your text any color you like</span> 
for You can highlight your text any color you like

make it color customizable :
<span style="color: red; font-size: 14pt">You can add colored text</span>
;

You can add colored text

or adding background image
Related Posts Plugin for WordPress, Blogger...