aToolTip – A Simple jQuery Tooltip

Quick Facts

• Lightweight (only 4kb uncompressed)
• Easy to use
• Choice of fixed, on click or follow mouse tooltip
• Highly customizable
• Compatable with Firefox 2.5+, Safari, Opera, Chrome and Internet Explorer 6, 7 & 8

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Usage

Start off by including jQuery as well as the aToolTip plugin

<!-- Include the needed js files-->  
<script type="text/javascript" src="jquery.min.js"></script>  
<script type="text/javascript" src="jquery.atooltip.min.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'  
        });   
          
        // on click tooltip that has callback functions  
        $('a.callBackTip').aToolTip({  
            clickIt: true,  
            onShow: function(){alert('I fired OnShow')},  
            onHide: function(){alert('I fired OnHide')}  
        });   
          
        // List of all parameters and their default values:  
        $('a').aToolTip({  
            // no need to change/override  
            closeTipBtn: 'aToolTipCloseBtn',  
            toolTipId: 'aToolTip',  
            // ok to override  
            fixed: false,                   // Set true to activate fixed position  
            clickIt: false,                 // set to true for click activated tooltip  
            inSpeed: 200,                   // Speed tooltip fades in  
            outSpeed: 100,                  // Speed tooltip fades out  
            tipContent: '',                 // Pass in content or it will use objects 'title' attribute  
            toolTipClass: 'defaultTheme',   // Set class name for custom theme/styles  
            xOffset: 5,                     // x position  
            yOffset: 5,                     // y position  
            onShow: null,                   // callback function that fires after atooltip has shown  
            onHide: null                    // callback function that fires after atooltip has faded out      
        });  
          
    });  

<!-- Here is the markup for the 4 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>  
<a href="#" class="callBackTip" title="Hello, I am aToolTip">Callback Tooltip</a> 

What does the tooltip markup look like?

<!-- the tooltip markup looks like this   
  
<div id="aToolTip" class="defaultTheme">  
    <p class="aToolTipContent">Your tooltip content</p>  
</div>  
  
-->