JQuery Easy Tooltip v2.0

HTML Code:
$(Element).easytooltip(Formid, options{backgroundcolor, border, color, event})
Demo: http://www.expbuilder.com/testpages/easytooltip2/
To see the last version (1.0) goto: http://www.expbuilder.com/vb/showthread.php?t=2
HTML Code:
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>
javascript Code:
HTML Code:
<script> $(document).ready(function() { $(".demo").easytooltip("formdisplay", {backgroundcolor: "transparent", border: "0px"}); }); </script>
Demo – Default
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> <script> $(document).ready(function() { $(".demo").easytooltip("formdisplay", {backgroundcolor: "transparent", border: "0px"}); }); </script>
Change background Color – backgroundcolor
HTML 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
HTML 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
HTML 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
HTML 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
JQuery Easy Tooltip v2.0 SetUp
A. Head Tag
Import files:
HTML Code:
<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:
HTML 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>
