JQuery 간단한 툴팁 효과

jquery 툴팁 효과를 찾으려고했지만 필요한 것을 찾을 수 없으므로 가장 간단한/가장 가까운 예제를 작성/수정하기 시작했습니다. 페이지의 아무 곳이나 클릭하면 다른 툴팁을 클릭하지 않는 한 현재 열려있는 툴팁이 숨겨집니다.이 경우 현재 열려있는 툴팁이 닫히고 새 툴팁이 열립니다.JQuery 간단한 툴팁 효과

툴팁 표시에 문제가있어서 페이지의 아무 곳이나 클릭해도 아무런 변화가 없습니다. 한 팁을 클릭하면 잘 보이고, 다음을 클릭하면 첫 번째를 닫고 두 번째 팁이 열립니다.이 후에 다른 툴팁을 클릭하면 빈 상자가 표시됩니다.

왜 이런 일이 발생합니까?

<!DOCTYPE html> 
<html> 

<head> 
<script type='text/javascript' src='jquery-1.6.2.js'></script> 

<style type='text/css'> 
    .tooltip{ 
     display:none; 
     padding:5px 10px; 
     background-color:#e5f4fe; 
     border:#5a5959 1px solid; 
     position:absolute; 
     z-index:9999; 
     color:#0c0c0c; 
     width:100px; 
     height:50px; 
    } 

</style> 

<script type='text/javascript'> 
    $(window).load(function(){ 
    $(document).ready(function() { 

    $('body').append('<div class="tooltip"><div class="tipBody"></div></div>'); 

    var tip; 

    $('a[title]').click(function(e) { 

     //display tip 
     tip = $(this).attr('title'); // tip = this title 
     $(this).attr('title',''); // empty title 
     $('.tooltip').fadeTo(300, 0.9).children('.tipBody').html(tip); // fade tooltip and populate .tipBody 

     //set position 
     $('.tooltip').css('top', e.pageY); 
     $('.tooltip').css('left', e.pageX); 

    }); 

    }); 

}); 

</script> 


</head> 
<body> 
    <a title="message1" class="printbtn" href="#">tip1</a> 
    <a title="message2" class="printbtn" href="#">tip2</a> 
</body> 
</html>

출처

2012-09-19 user1334130

당신은 그렇지 않으면 툴팁을 닫고, 이벤트 객체를 사용하여 몸에 클릭에 대한 이벤트 리스너를 추가의 활성 툴팁 경우 대상을 확인해야합니다.

$('body').on('click', function (e) { 
    if (!$(e.target).hasClass('tooltip')) { 
    // hide your tooltip 
    } 
});

예 :

당신이 아무 일도 발생하지 텍스트 자체를 클릭하면 당신이 어디 텍스트가 표시되지 않습니다 클릭하면 http://jsfiddle.net/xRNnP/.

확인하려는 대상이 툴팁 자체가 아니라 툴팁을 트리거하는 링크가되도록 수정할 수도 있습니다.

출처

2012-09-19 01:28:38 Mark

JQuery 간단한 툴팁 효과

답변

관련 문제