Jquery内容弹出窗口无法正确显示

Question

我在页面上有多个工具提示，但第一个是生成多个版本，最后是错误的内容（它显示的是第二个内容）。我的功能有多少，它多次执行鼠标悬停事件并查看错误的内容？

jQuery(document).ready(function($){
  $(".noteshoverbtn").each(function() {
      var btn = $(this);
          html = $("html");
          tip     = btn.html();
          tooltip = $("<div class='notescontent'></div>");
          closebtn = $("<div>", {text: "X", "class": "close"});
          if( !tip || tip == "" )
            return false;
          btn.empty();
          tooltip.css("opacity", 0).html(tip).appendTo(btn).hide();
          tooltip.append(closebtn);
      btn.mouseenter(function() {
        console.log("mouseenter");
        if( $( window ).width() < tooltip.outerWidth() * 1.5 )
            tooltip.css("max-width", $( window ).width() / 2 );
        else
          tooltip.css("max-width", 340 );
        var pos_left = btn.offset().left + ( btn.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
            pos_top = btn.offset().top - tooltip.outerHeight() - 20;
            pos_page_top   = btn.offset().top - tooltip.scrollTop() - 20;
            scrollTop    = $(window).scrollTop(),
            elementOffset = btn.offset().top,
            distance       = (elementOffset - scrollTop);
        if( pos_left < 0 ) {
          pos_left = btn.offset().left + btn.outerWidth() / 2 - 20;
          tooltip.addClass("left");
        }else
          tooltip.removeClass("left");
        if( pos_left + tooltip.outerWidth() > $( window ).width() ) {
          pos_left = btn.offset().left - tooltip.outerWidth() + btn.outerWidth() / 2 + 20;
          tooltip.addClass("right");
        }else
          tooltip.removeClass("right");
        if (pos_top < 0 || distance < elementOffset) {
          var pos_top = btn.offset().top + btn.outerHeight();
          tooltip.addClass("top");
        }else
          tooltip.removeClass("top'");
          tooltip.css( { left: pos_left, top: pos_top } ).animate( { top: "+=14", opacity: 1 }, 50 ).show();
          btn.addClass("active");
      });

      btn.mouseleave(function() {
        tooltip.animate( { top: "-=14", opacity: 0 }, 50 ).hide();
        btn.removeClass("active");
        console.log("mouseleave");
      });

      $(document).keyup(function(e) {
        if (e.keyCode === 27)
          tooltip.animate( { top: "-=14", opacity: 0 }, 50 ).hide();
          btn.removeClass("active");
      });

      if($("html").hasClass("touch")){
        console.log("html has touch class");
        //console.log(tooltip);
        $(document).on("touchstart", function () {
          if(btn.hasClass("active")){
            tooltip.animate( { top: "-=14", opacity: 0 }, 50 ).hide();
            btn.removeClass("active");
            console.log("mobileclose");
          }
        });
      }

    $(".notescontent a").on("touchstart", function(e){ e.stopPropagation(); });

  });
});

https://jsfiddle.net/Snarf/8j455a6p/

提前致谢！