JQuery Easy Tooltip v2.0

    

$(Element).easytooltip(Formid, options{backgroundcolor, border, color, event})
    

• JQuery Easy Tooltip Demo
  • JQuery Easy Tooltip Default
  • Change background {backgroundcolor}
  • Change border {border}
  • Change Font color {color}
  • Change mouse event {event}
• Download JQuery Easy Tooltip v2.0
• JQuery Easy Tooltip v2.0 SetUp

tested and working with all browsers

Demo

Demo - view source

    
<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>
    

    

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

Demo - Default

    



<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

    

<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

    

<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

    

<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

    

<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

- jquery-1.3.2.min.js

- easytooltip2.0.zip

Download this demo

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>