트위터 부트 스트랩 툴팁의 수직 오프셋

Question

트위터 부트 스트랩 툴팁이 할당 된 페이지에 여러 요소가 동적으로 추가되었습니다. 그러나 이러한 동적으로 추가 된 객체에는 툴팁이 정확하게 정렬되지 않도록하는 몇 가지 수직 오프셋이 있습니다 (약 15px만큼 아래로 내 보내야 함). 내 질문에 다음과 같이 렌더링 할 때 현재 위치 아래의 모든 툴팁 (현재 바인딩 된 것과 그렇지 않은 것 모두)을 어떻게 다시 배치합니까?

은 다음 툴팁이 현재 표시되고있는 경우 오프셋을 담당하지만, (미래의 툴팁이 오프셋없이 표시됩니다) 사전 작동하지 않습니다

$('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 15 + 'px') 

을 내가 단서 어떤 종류의 이벤트에 대한이 없습니다 이제까지 화면에 표시된 툴팁에 적용하기 위해 이것을 묶어 라.

Answer 1

툴팁은 어떻게 활성화됩니까? 기본 '가져가'를 사용하는 경우 당신은 당신의 요소를 가리킬 때 기능을 할당 한 다음과 같이 .CSS 사용하여 .tooltip 요소의 위치를 ​​변경 수 : Bootply에서 작업

$("[data-toggle=tooltip]").tooltip(); 
$("[data-toggle=tooltip]").hover(function(){ 
    $('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 15 + 'px') 
}); 

: http://bootply.com/59977

$("[data-toggle=tooltip]")을 도구 설명에 사용하는 선택기로 변경해야 할 수 있습니다.

Answer 2

우리는 그렇지 툴팁이 사라지기 전에 다시 오프셋 추가의 오프셋을 보상 할 수있는 'handlerOut'콜백을 추가해야합니다 : 내가 '쇼'옵션을 사용하고

$('[data-toggle="tooltip"]').tooltip(); 
    $('[data-toggle="tooltip"]').hover(function(){ 
     $('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 20 + 'px')    
    }, 
    function() { 
     $('.tooltip').css('top', parseInt($('.tooltip').css('top'))) 
    });