Advanced Search

Small jQuery Tooltip

/ Published in: Other
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. 	$('.ssTooltip').hide();
  2. 	$('#ssInfoList1 dd').live('mouseover', function(){
  3. 		$('body').append('<div id="ssTooltip" style="position: absolute; display: none;">\
  4. 			<p>'+$(this).children('.ssTooltip').text()+'</p>\
  5. 		</div>');
  6.  
  7. 		//get the position of the placeholder element
  8. 		var pos = $(this).offset();  
  9. 		var width = $(this).width();
  10.  
  11. 		//show the menu directly over the placeholder
  12. 		$("#ssTooltip").css( { "left": (pos.left + 100) + "px", "top":pos.top + "px" } );
  13. 		$("#ssTooltip").fadeIn('slow');
  14.  
  15. 	});
  16. 	$('#ssInfoList1 dd').live('mouseout', function(){
  17. 		$('div#ssTooltip').remove();
  18. 	});
  19.  

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.