Recently while working on a system I decided to use some nice looking tooltips for various places on the site.
Tooltip: The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small “hover box” with information about the item being hovered over.
The tooltip concept can be used not only as a tooltip but to display data that you need in a quick fashionably manner without leaving the page. This can be accomplished by just using CSS and jQuery or if you want to add the extra effect, you can do so by adding background images.
This is to show you the easiest way of doing it, not necessarily the best. 🙂
How To:
Start by including jQuery in the <head> section of your site:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Now place the anchor link in the spot where you want it and place your <div> that will carry your tooltip right next to it. Give this div and anchor each their own id’s. You will use these id’s to style it and jQuery will use it to control the events.
<a src="#" id="DemoTooltip">Hover over me;</a>
<div id="DemoTooltipDiv">This is where you place the tooltip text</div>
Next you style the tooltip <div> to fit your style. You can use background images here or change it just like you want. I wont go into styling details in this post want to keep it simple but there are some great sites with great tutotials.
<style type="text/css">
#DemoTooltipDiv{
width:250px;
background:#F2F7DE;
border:solid 1px #52534C;
position:absolute;
display: none;
font-size:10pt;
padding:5px;
}
</style>
After adding that styling code the link will show but the tooltip will be hidden because we set the position:none of the DemoTooltipDiv.
Now enter the jQuery in the <head> section before the </head> tag.
<script type="text/javascript">
$(document).ready(function(){
$("#DemoTooltip").mouseover(function () {
$("#DemoTooltipDiv").show("fast");
});
$("#DemoTooltip").mouseleave(function () {
$("#DMTooltipTextDiv").hide("fast");
});
});
</script>
Code above explained:
By using $(“#DemoTooltip).mouseover() you assign a mouseover funtion to the anchor you created. the #DemoTooltip refers to the element with its ID set to “DemoTooltip”
then inside the .mouseover() you add $(“#DemoTooltipDiv”).show(“fast”) this once again using the element id tells it that when hovered over the #DemoTooltip element the #DemoTooltipDiv will show and we gave through the variable “fast” which obviously determines the speed of the jQuery action.
The second function does exactly the same except I changed the event to mouseleave and the effect to hide. This will then cause the tooltip to disappear when you move the mouse away from the tooltip element.
I hope this is clear and easy to understand if not please leave a reply/comment.
Here is some links for different ways to do tooltips:
