online marketing

 

JQuery Easy Tooltip v2.0

 
    
$(Element).easytooltip(Formid, options{backgroundcolor, border, color, event})
Move your mouse point here to see what JQuery Easy Tooltip can do !!

tested and working with all browsers

 

Demo

Move your mouse point here to see what JQuery Easy Tooltip can do !!  

Demo - view source

HTML Code:
    
<style type="text/css"> .bg { background-image: url(bg.jpg); width: 275px; height: 135px; padding: 22px 55px 20px 55px; background-repeat: no-repeat; background-position: left top; } </style> <a class="demo" href="javascript:void(0);"> Move your mouse point here to see what JQuery Easy Tooltip can do !! </a> </div> <div id="formdisplay" style="display: none;padding: 20px;width: 500px;"> <div class="bg"> <h2>This is a Demo of Easy Tooltip</h2> you can but any thing you want here </div> </div>

Javascipt Code:
    
<script> $(document).ready(function() { $(".demo").easytooltip("formdisplay", {backgroundcolor: "transparent", border: "0px"}); }); </script>

 

Demo - Default

try the Default use !!  

 

HTML Code:
    
<a class="demo" href="javascript:void(0);"> Move your mouse point here to see what JQuery Easy Tooltip can do !! </a> </div> <div id="formdisplay" style="display: none;padding: 20px;width: 500px;"> <div class="bg"> <h2>This is a Demo of Easy Tooltip</h2> you can but any thing you want here </div> </div>

Javascipt Code:
    
<script> $(document).ready(function() { $(".demo").easytooltip("formdisplay", {backgroundcolor: "transparent", border: "0px"}); }); </script>
 

Change background Color - backgroundcolor

check background color !!  

 

Code:
    
<div id="formdisplay2" style="display: none;padding: 20px;width: 500px;"> <h2>This is a Demo of Easy Tooltip</h2> you can but any thing you want here </div> <a id="demo2" href="javascript:void(0);">check background color !! </a> <script type="text/javascript"> $("#demo2").easytooltip("formdisplay2", {backgroundcolor: "#3399FF"}); </script>
 

Change border

check border !!

 

Code:
    
<div id="formdisplay3" style="display: none;padding: 20px;width: 500px;"> <h2>This is a Demo of Easy Tooltip</h2> you can but any thing you want here </div> <a id="demo3" href="javascript:void(0);">check border !! </a> <script type="text/javascript"> $("#demo3").easytooltip("formdisplay3", {border: "6px solid #3399FF"}); </script>
 

Change Font Color

check Font Color !!

 

Code:
    
<div id="formdisplay4" style="display: none;padding: 20px;width: 500px;"> <h2>This is a Demo of Easy Tooltip</h2> you can but any thing you want here </div> <a id="demo4" href="javascript:void(0);">check Font Color !! </a> <script type="text/javascript"> $("#demo4").easytooltip("formdisplay4", {color: "red"}); </script>
 

Change Mouse event

click here to check Mouse event !!

 

Code:
    
<div id="formdisplay5" style="display: none;padding: 20px;width: 500px;"> <h2>This is a Demo of Easy Tooltip</h2> you can but any thing you want here </div> <a id="demo5" href="javascript:void(0);">click here to check Mouse event !! </a> <script type="text/javascript"> $("#demo5").easytooltip("formdisplay5", {event: "click"}); </script>

 

Download JQuery Easy Tooltip v2.0

1- Download jQuery JavaScript Library

- jquery-1.3.2.min.js

2- JQuery Easy Tooltip v2.0

- easytooltip2.0.zip

Download this demo

- easytooltip2.0.package.zip


 

JQuery Easy Tooltip v2.0 SetUp

A. Head Tag

Import files:

    
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="easytooltip.js"></script>

B. Body Tag

HTML & JavaScript Code:

    
<div id="formdisplay" style="display: none;padding: 20px;background-color: #ffffff;border: 3px solid #000;width: 500px;"> <h2>This is a Demo of Easy Tooltip</h2> you can but any thing you want here </div> <script> $(document).ready(function() { $(".demo").easytooltip("formdisplay"); }); </script>