2013-06-24 2 views
4

jQuery와 Twitter Bootstrap을 사용 중이며 링크 위로 마우스를 가져 가면 tooltip이 나타나기를 원합니다. 그러나 링크 위로 마우스를 가져 가면 처음 툴팁이 나타나지 않지만 마우스를 움직여 다시 움직이면 해당 링크가 매번 작동합니다.Javascript 툴팁은 두 번째 마우스 오버시에만 나타납니다.

나는 페이지에 다음의 몇 가지가 있습니다

<a href="#" onmouseover="$(this).tooltip();" class="postAuthor" data-original-title="@username">Full Name</a> 

내가 생성 한 jsFiddle이 입증 : jsFiddle. 어떤 도움을 주시면 감사하겠습니다 - 미리 감사드립니다!

답변

3

어떻게 일어나는 것은 당신이 그것을 마우스를 움직일 요소에 플러그인을 인스턴스화하고 있다는 것입니다 처음에는 플러그 인이 해당 요소의 후속 마우스 오버시 예상대로 작동합니다.

(fiddle 참조) docs 작품에서 제안 된 구성을 사용 :

자바 스크립트 :

// tooltip demo 
$('div').tooltip({ 
    selector: "a[data-toggle=tooltip]" 
}) 

HTML : 나는 경우 청소기있을 거라고 생각

<div style="text-align: center; width: 100%; margin-top: 50px;"> 
    <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a> <p/><p/> 
    <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a><p/> 
    <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a><p/> 
    <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a><p/> 
    <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a> 
</div> 
1

.tooltip() 기능은 링크에 툴팁 효과를 시작하지 는 툴팁을 보여

설명 :

$(this).tooltip()가 처음 가져가 트리거되면, 먼저 플러그인을 인스턴스화합니다. 마지막으로 두 번째 호버에서 툴팁을 얻습니다.

해결 :

이 코드에 추가 :

$(function() { 
    $("a").tooltip(); 
}); 

Solution (JSFiddle)

-2

JQuery가 mouseover 이벤트를 처리하게하고, 및

비슷한 문제 .ready $ (문서) 내에서 모든 코드를 넣어 솔루션은 여기에서 찾을 수 있습니다 : Jquery onmouseover triggers on second event

+1

-1을, 당신이 질문을 무시했기 때문에. – Starx

관련 문제