aToolTip

DOWNLOAD DEMO

Quick Facts

 

Demos

Usage

Start off by including jQuery as well as the aToolTip plugin




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  	
	});
	
});

Basic HTML markup used in the demos


Normal Tooltip
Fixed Tooltip
On Click Tooltip
Callback Tooltip

What does the tooltip markup look like?


Creative Commons License
This work is licensed under a Creative Commons Attribution 3.0 Unported License.