Brandammo

Blog

jQuery Tool Tip Plugin with Mouse Follow

Here is a quick plugin I recently created, I know there are already a lot of existing alternatives, but here is one I recently created for one of our clients.

HTML:
Make sure each tip is within its own element (“tip-item“), the HTML below shows the “activator” (the element that gets mouseover), this has a class attached to it called “tip-specific-class“, and the next element is the tooltip itself with the same class, the class must be the same to ensure the plugin knows which tip relates to which element.

<div class="tip-item">
	<div class="activator tip-specific-class">Hover Over Me - I can be an image as well!</div>
	<div class="tip tip-specific-class">
		<p>ToolTip Content - Put anything you like in here!</p>
	</div>
</div>


CSS:
Make sure the .tip-item has a position set to relative.

<style type="text/css" media="screen">

	.activator {
		background:#0099ff;
		width:100px;
		height:100px;
		padding:20px;
		cursor:pointer;
	}

	.tip-item {
		position:relative;
	}

	.tip {
		display:none;
		width:200px;
		height:100px;
		background:red;
		padding:20px;
		position:absolute;
		top:0px;
		left:0px;
		z-index:1;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		box-shadow:1px 1px 5px #000;
		-moz-box-shadow:1px 1px 5px #000;
		-webkit-box-shadow:1px 1px 5px #999;
	}

</style>

JS:
The default options of the plugin.

var defaults = {
		tipClass: 'tip', //the class name for your tip
		tipFadeEasing: 'easeOutQuint', //easing method
		tipFadeDuration: 200, //fade duration
		tipOpacity: 1, //opacity of tip when mouseover
		tipOffset: 10 //offset the tip relative to mouse cursor in pixels
	};

Initialise the plugin:
The following initialises the plugin, i have changed the opacity to 0.9 and offset the tip by 20px just as an example.

jQuery(function(){
		jQuery('.activator.tip-specific-class').BAToolTip({
			tipOpacity: 0.9,
			tipOffset: 20
		});
	})

View Demo

Download Source Files (including example): jquery.BA.ToolTip

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>