atooltip jQuery ToolTip plugin

<!-- Include the needed js files-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/atooltip.jquery.js"></script>

Initiate the plugin

// initiate the plugin after DOM has loaded
$(function(){

    // basic usage
    $('a.normalTip').aToolTip();
    // fixed tooltip
    $('a.fixedTip').aToolTip({
        fixed: true
    });
    // on click tooltip with custom content
    $('a.clickTip').aToolTip({
        clickIt: true,
        tipContent: 'Hello I am aToolTip with content from param'
    });   
    // List of all paramaters and their default values:
    $('a').aToolTip({
        clickIt: false,                     // set to true for click activated tooltip
        closeTipBtn: 'aToolTipCloseBtn',    // you can set custom class name for close button on tooltip
        fixed: false,                        // Set true to activate fixed position
        inSpeed: 400,                        // Speed tooltip fades in
        outSpeed: 100,                        // Speed tooltip fades out
        tipContent: '',                        // Pass in content or it will use objects 'title' attribute
        toolTipClass: 'aToolTip',            // Set custom class for tooltip
        xOffset: 5,                            // x Position
        yOffset: 5                            // y position
    });
});

 

Basic HTML markup used in the demos

<!-- Here is the markup for the 3 examples-->
<a href="#" class="normalTip" title="Hello, I am aToolTip">Normal Tooltip</a>
<a href="#" class="fixedTip" title="Hello, I am aToolTip">Fixed Tooltip</a>
<a href="#" class="clickTip">On Click Tooltip</a>

 

What does the tooltip markup look like?

<!-- the tooltip markup looks like this

<div class="aToolTip">
    <p class="aToolTipContent">Your tooltip content</p>
</div>

-->

 

download