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>

VINEESH

Pages

Friday 22 March 2013

Simple JQuery Tooltips