HowTo

Examples rule! See also Docs.

HTML markup:

	<div>
		Standard tip:
		<a href="#" class="imagetip" data-image="image.jpg" title="Label">example link</a>.
	</div>
	
	<div>
		Customized tip:
		<a href="#" class="mylinks" data-image="image.jpg" title="Label">example link</a>.
	</div>

JS code:

	// Just create the object in the DOM ready event
	window.addEvent('domready', function() {
		var myImageTip = new MooImageTip();
	});
	
	// If you want to customize the tip, you can use some options
	window.addEvent('domready', function() {
		var myAdvancedImageTip = new MooImageTip({
			offset: {x: 4, y: 4},      // This will move the tip relative to mouse position
			className: 'mylinks',      // This is the links class name
			tipId: 'mytip',            // This is the tip ID, for styling
			follow: false,             // Tip will not follow the mouse cursor
			fx: { duration: 'short' }  // Additional Fx options
		});
	});

CSS rules:

	/* Standard tip styling (default ID is "mooimagetip") */
	#mooimagetip {
		padding: 5px;
		background-color: #CCCCCC; }

	/* Customized tip styling (our ID is "mytip") */
	#mytip {
		padding: 5px;
		background-color: #CCCCFF;
	}