【JavaScript】jQueryでツールチップ表示

画像にマウスを重ねると、alt属性のテキストをツールチップに表示する。
捨てるのもなんなのでチェック用にでも使ってください。

jquery.tooltip.js

;(function($,undefined){
  $("img").each(function(){
    $(this)
      .off(".tooltip")
      .on("mouseenter.tooltip", function(e){
        var alt = $(this).attr("alt") || "...";
        var tip = $("<span>"+alt+"</span>");
        tip.css({
          position: "absolute",
          top : e.pageY-24,
          left: e.pageX,
          background: "white",
          color: "black",
          border: "1px outset #333"
        });
        $("body").append(tip);
        $(this).on("mouseleave.tooltip", function(e){
          tip.remove();
        });
      });
  });
})(jQuery);