위치 및 호버 기능을 가진 jQuery의 툴팁 문제

다음 코드 예제가 있습니다 (아래 참조). 내 문제는 내가 툴팁에서 "오래된"텍스트를 보여주지 않는다는 것이다. 발생 위에 마우스 이후,위치 및 호버 기능을 가진 jQuery의 툴팁 문제

$('body').append('<div id="tooltip"></div>'); 
var tt = $('#tooltip'); 
$('a.tooltip').each(function(){ 
    $(this).data('title', this.title).attr('title', ''); 
}).mouseenter(function(){ 
    var t = $(this), o = t.offset(); 
    tt.html(t.data('title')).css({top: o.top, left: o.left}).fadeIn('fast'); 
}); 
tt.mouseleave(function() { 
    $(this).stop().hide(); 
});

You can give it a try here을 :

<style type="text/css"> 
#tooltip { 
    position: absolute; 
    background: #FFF; 
    display: none; 
} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('body').append('<div id="tooltip"></div>'); 
    var tt = $('#tooltip'); 
    $('a.tooltip').each(function(){ 
     $(this).data('title', this.title).attr('title', ''); 
    }).hover(function(){ 
     var t = $(this), o = t.offset(); 
     tt.html(t.data('title')).css({top: o.top, left: o.left}).fadeIn('fast');   
    }, 
    function(){ 
     tt.css({display: 'none'}); 
    }); 
}); 
</script> 
</head> 
<body> 

    <a href="#" class="tooltip" title="VeryLongTextMoreTextVeryLongText">VeryLongText...VeryLongText</a>

출처

2010-08-11 Jens

문제는 마우스를 다음과 같이 호버를 분할해야하므로이, 툴팁 요소의을 <a>하지만 를 입력입니다 <a>에 .mouseeenter()을 추가하십시오. 그러나이면 <a> 상단에 #tooltip이 있으므로이를 숨기려면 #tooltip에 .mouseleave()이 필요합니다.

무엇 현재 일어나고있는 것은이 .fadeIn()에 시작하지만, (#tooltip 아이 아니므로)되는 즉시처럼 그렇게 mouseleave 이벤트가 발생하기 때문에 display: none;가 트리거 (여기 .hide()을 사용할 수 있습니다). display:none;은이되지만, 페이드의 다음 간격으로 바뀌기 때문에 페이드 인 요소가 생깁니다. 위 핸들러의 mouseleave 처리기에서이를 방지하기 위해 .stop()을 추가하여이 마우스 오버에 대한 추가 페이딩을 중지합니다.

출처

2010-08-11 11:17:05

감사합니다. Nick :) - Works Fine Now – Jens

위치 및 호버 기능을 가진 jQuery의 툴팁 문제

답변

관련 문제