12th Jul
0
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"> ToolTip Content - Put anything you like in here! </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 }); })
Download Source Files (including example): jquery.BA.ToolTip