각 내가 툴팁 기능을하고 있어요 내가 자바 스크립트에 새로운 오전

Question

클릭하십시오 요소를 클릭

현재

$(function() 
{ 
    var targets = $('[rel~=tooltip]'), 
     target = false, 
     tooltip = false, 
     title = false; 
    targets.bind('click', function() 
    { 
     target = $(this); 
     tip = target.attr('title'); 
     tooltip = $('<div id="tooltip"></div>'); 

     if(!tip || tip == '') 
      return false; 

     target.removeAttr('title'); 
     tooltip.css('opacity', 0) 
       .html(tip) 
       .appendTo('body'); 

     var init_tooltip = function() 
     { 
      if($(window).width() < tooltip.outerWidth() * 1.5) 
       tooltip.css('max-width', $(window).width()/2); 
      else 
       tooltip.css('max-width', 340); 

      var pos_left = target.offset().left + (target.outerWidth()/2) - (tooltip.outerWidth()/2), 
       pos_top = target.offset().top - tooltip.outerHeight() - 20; 

      if(pos_left < 0) 
      { 
       pos_left = target.offset().left + target.outerWidth()/2 - 20; 
       tooltip.addClass('left'); 
      } 
      else 
       tooltip.removeClass('left'); 

      if(pos_left + tooltip.outerWidth() > $(window).width()) 
      { 
       pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth()/2 + 20; 
       tooltip.addClass('right'); 
      } 
      else 
       tooltip.removeClass('right'); 

      if(pos_top < 0) 
      { 
       var pos_top = target.offset().top + target.outerHeight(); 
       tooltip.addClass('top'); 
      } 
      else 
       tooltip.removeClass('top'); 

      tooltip.css({ left: pos_left, top: pos_top }) 
        .animate({ top: '+=10', opacity: 1 }, 50); 
      tooltip.fadeOut(6000); 
     }; 

     init_tooltip(); 
     $(window).resize(init_tooltip); 
    }); 
}); 

는, 표시하고 페이드 아웃. 이것이 바람직한 행동입니다. 그러나 페이지가 다시로드되면 옵션을 클릭 할 수 있습니다. 함수가 툴팁을 표시하고 클릭 할 때마다 운명을 정하게하려면 어떻게해야합니까?

Answer 1

코드를 간단히 살펴보고 target.removeAttr('title')이라는 제목을 제거하면됩니다. 다음 번에 클릭하면 표시 할 제목이 없습니다.