online marketing

JQuery Easy Tooltip v2.0

Posted by admin on December-11-2009 Add Comments

Bookmark and Share


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

- easytooltip2.0.package.zip

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>


Your Ad Here


Post a Comment

You must be logged in to post a comment.