Small jQuery Tooltip


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



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.