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>

Color theory

In the visual arts, color theory is a body of practical guidance to color mixing and the visual effects of specific color combination. There are also definitions (or categories) of colors based on the color wheel: primary color, secondary color and tertiary color. Although color theory principles first appeared in the writings of Leone Battista Alberti (c.1435) and the notebooks of Leonardo da Vinci (c.1490), a tradition of "colory theory" began in the 18th century, initially within a partisan controversy around Isaac Newton's theory of color (Opticks, 1704) and the nature of so-called primary colors. From there it developed as an independent artistic tradition with only superficial reference to colorimetry and vision science.

Color theory was originally formulated in terms of three "primary" or "primitive" colors—red, yellow and blue (RYB)—because these colors were believed capable of mixing all other colors.

VINEESH

Pages

Friday 22 March 2013

Simple JQuery Tooltips