Home arrow Tutorials arrow Tool Tips
Tool Tips Print E-mail
Written by admin   
Tuesday, 13 May 2008

This month's template includes Tool Tips that can be applied anywhere throughout the template. The below code is what we've used on this template to stylize the tool tips.

<a onmouseover="Tip('Click here to demo this background color.', WIDTH, 140, OPACITY, 80, ABOVE, true, OFFSETX, 1, FADEIN, 200, FADEOUT, 300,SHADOW, true, SHADOWCOLOR, '#000000',SHADOWWIDTH, 2, BGCOLOR, '#000000',BORDERCOLOR, '#000000',FONTCOLOR, '#FFFFFF', PADDING, 9)" href="http://www.shape5.com/demo/etensity/">

<img class="boxed2" alt="" src="http://www.shape5.com/demo/etensity/images/smone.png"/>


If you want to add an image to the tooltip you can use something similar to the below:
<a href="index.htm" onmouseover="Tip('Image Demo

<img src=http://www.shape5.com/demo/etensity/images/smone.png width=310 height=125>')">Image Tool Tip Demo </a>

Image Tool Tip Demo

Or want a more advanced image tooltip popup?
<a href="#" onmouseover="Tip('Image Demo<br /> <br /><img src=http://www.shape5.com/demo/etensity/images/smone.png width=310 height=125>',SHADOW, true, BGCOLOR, '#000000', FADEIN, 400, FADEOUT, 400, SHADOWCOLOR, '#000000', BORDERCOLOR, '#000000',OPACITY, 90,FONTCOLOR, '#FFFFFF')"><strong>Image Tool Tip Demo</strong></a>
Image Tool Tip Demo

Last Updated ( Thursday, 12 June 2008 )
Next >