Even Simpler Tooltip


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

Adapted so a delay can be applied on mouseleave.


Copy this code and paste it in your HTML
  1. /**************************************************************/
  2. /* simple tooltip */
  3. /**************************************************************/
  4. tooltip : function(options){
  5.  
  6. var defaults = {
  7. selector: ".tooltip",
  8. xOffset: -10,
  9. yOffset: -25,
  10. tooltipWrapper: "#tooltip",
  11. clickRemove: false,
  12. content: "",
  13. useElement: "",
  14. delay: 400
  15. };
  16.  
  17. var options = $.extend(defaults, options);
  18. var content;
  19.  
  20. return $(options.selector).each(function() {
  21. var title = $(this).attr("title");
  22. $(this).hover(function(e){
  23. content = (options.content != "") ? options.content : title;
  24. content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
  25. $(this).attr("title","");
  26. if (content != "" && content != undefined){
  27. if ( $(options.tooltipWrapper).length ) { $(options.tooltipWrapper).remove(); }
  28. $("body").append("<div id='"+ options.tooltipWrapper.replace("#","") +"'>"+ content +"</div>");
  29. $(options.tooltipWrapper)
  30. .css("position","absolute")
  31. .css("top",(e.pageY - options.yOffset) + "px")
  32. .css("left",(e.pageX + options.xOffset) + "px")
  33. .css("display","none")
  34. .fadeIn("fast")
  35. }
  36. },
  37. function(){
  38. $(options.tooltipWrapper).fadeOut(options.delay,function() { $(this).remove(); });
  39. $(this).attr("title",title);
  40. });
  41.  
  42. $(this).mousemove(function(e){
  43. $(options.tooltipWrapper)
  44. .css("top",(e.pageY - options.yOffset) + "px")
  45. .css("left",(e.pageX + options.xOffset) + "px")
  46. });
  47. if(options.clickRemove){
  48. $(this).mousedown(function(e){
  49. $(options.tooltipWrapper).remove();
  50. $(this).attr("title",title);
  51. });
  52. }
  53. })
  54.  
  55. }

URL: http://cssglobe.com/lab/easytooltip/01.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.