you are in: codestacker → codes [RSS] → tag: tooltip [RSS]

easiest tooltip ever Delicious Email

based on http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery version

show/hide lines
   1  <style>
   2  	#tooltip {
   3  		position:absolute;
   4  		border:1px solid #333;
   5  		background:#f7f5d1;
   6  		padding:2px 5px;
   7  		color:#333;
   8  		display:none;
   9  	}
  10  </style>
  11  
  12  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  13  
  14  <script type="text/javascript">
  15  	$(document).ready(function(){			
  16  	    xOffset = 10;
  17  		yOffset = 20;				
  18  
  19  		$("a.tooltip").hover(function(e){											  
  20  			this.t = this.title;
  21  			this.title = "";									  
  22  			$("body").append("<p id='tooltip'>"+ this.t +"</p>");
  23  			$("#tooltip").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px").fadeIn("fast");		
  24  	    }, function(){
  25  			this.title = this.t;
  26  			$("#tooltip").remove();
  27  	    });	
  28  
  29  		$("a.tooltip").mousemove(function(e){
  30  			$("#tooltip").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px");
  31  		});
  32  	});
  33  </script>
  34  
  35  <a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>
created by leozera — 20 January 2011 — get a short url — tags: javascript jquery tooltip — embed