A help bubble implementation in javascript from about 4 years ago.

Help bubble

$.fn.helpBubble = function() {
  var widget = $(this);
  $(this).prepend("<div class=\"information\"><a href='javascript:void(0);'><img src='/images/information.png' /></a></div>");
  var info = $(".information");
  info.css({
    "position": "absolute",
    "margin"  : "-1px 0 0 " + (widget.innerWidth() - 17) + "px"
  });
  var info = widget.find(".infomation");
  var title = widget.attr("title");
      widget.prepend('<div class="tooltip"><p>' + title + '</p></div');
  var tooltip = widget.find(".tooltip");
  tooltip.css({
    'width' : widget.innerWidth() + "px"
  });
  // Had to do this since the setting of the width above affects the height...
  tooltip.css({'margin-top' : "-" + (widget.find(".tooltip").innerHeight()) + "px"});
  
  widget.hover(
    function(){
      $(this).find(".information").fadeIn("fast");
      var information = $(this).find(".information a");
      information.click(clickInformation);
    },
    function(){
      var information = $(this).find(".information");
      information.hide();
      widget.hideHelpBubble();
    }
  );
  
  function clickInformation(){
    widget.displayHelpBubble();
  }
}
$.fn.displayHelpBubble = function(){
  var widget = $(this);
  var info = widget.find(".tooltip");
  info.fadeIn("fast");
}
$.fn.hideHelpBubble = function(){
  var widget = $(this);
  var info = widget.find(".tooltip");
  info.hide();
}