Monday, April 25, 2011

How to create a tooltips with jQuery

<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>

No comments:

Post a Comment