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
});
})
Download Source Files (including example): jquery.BA.ToolTip