How To Create A Simple Tooltips With JQuery
- Identify the “target” that need to show the tooltips message.
- Create a tooltips message and CSS style for it.
- Three functions, – showTooltips, hideTooltips, changeTooltipsPosition.
- While mouseenter the “target“, use showTooltips to show the tooltips message and initial the position withchangeTooltipsPosition.
- While mousemove around the “target“, keep change the tooltips message position with changeTooltipsPosition.
- While mouseleave the “target”, use hideTooltips to hide the tooltips message.
- Use jQuery to do it
Step 1: Target
The “hint” and “username label” are the target to show the tooltips message.
<label id="username">Username : </label><input type="text" / size="50"> <span id="hint">hint (mouseover me)</span>
Step 2: Tooltips CSS
Create a CSS style for tooltips message.
.tooltip{
margin:8px;
padding:8px;
border:1px solid blue;
background-color:yellow;
position: absolute;
z-index: 2;
}
Step 3: Show Tooltips
Append the tooltips message to the “body” tag, and initial the tooltips message position.
var showTooltip = function(event) {
$('div.tooltip').remove();
$('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
.appendTo('body');
changeTooltipPosition(event);
};
Step 4: Change Tooltips
Change the tooltips message position.
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX - 8;
var tooltipY = event.pageY + 8;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
Step 5: Hide Tooltips
Hide the tooltips message.
var hideTooltip = function() {
$('div.tooltip').remove();
};
Step 6: Bind It
Bind the mouse events to the target.
$("span#hint,label#username'").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
Try it yourself
In this example, mouseover the hint or label to show the tooltips effect.
<html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> #hint{ cursor:pointer; } .tooltip{ margin:8px; padding:8px; border:1px solid blue; background-color:yellow; position: absolute; z-index: 2; } </style> </head> <body> <h1>jQuery tooltips example</h1> <label id="username">Username : </label><input type="text" / size="50"> <span id="hint">hint (mouseover me)</span> <script type="text/javascript"> $(document).ready(function() { var changeTooltipPosition = function(event) { var tooltipX = event.pageX - 8; var tooltipY = event.pageY + 8; $('div.tooltip').css({top: tooltipY, left: tooltipX}); }; var showTooltip = function(event) { $('div.tooltip').remove(); $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>') .appendTo('body'); changeTooltipPosition(event); }; var hideTooltip = function() { $('div.tooltip').remove(); }; $("span#hint,label#username'").bind({ mousemove : changeTooltipPosition, mouseenter : showTooltip, mouseleave: hideTooltip }); }); </script> </body> </html>
