부트 스트랩 Popover의 위치를 ​​아래로 어떻게 이동합니까?

Question

기본적으로 나는 부모님 안에서 호버링하기 위해 만들어지는 Boostrap Popover를 가지고 있습니다. 이렇게하면 사용자가 팝업을 시작한 다음 Popover 위로 이동하여 링크를 클릭 할 수 있습니다.

사용자가 쉽게 popover에 마우스를 이동할 수 있도록이 팝업을 약 10px (최고 값 + 10px)까지 약간 이동해야합니다. 현재 popover로 마우스를 이동하는 유일한 방법은 popover 아래에있는 작은 화살표를 따라 이동하는 것입니다.

jQuery를 : 여기에

은 예입니다

$('td.chartSection').each(function() { 
    var $thisElem = $(this); 
    $thisElem.popover({ 
     placement: 'auto', 
     trigger: 'hover', 
     html: true, 
     container: $thisElem, 
     animation: true, 
     title: 'Name goes here', 
     content: 'This is the popover content. You should be able to mouse over HERE.' 
    }); 
}); 

HTML :

<table> 
    <tr> 
     <td class="chartSection">Chart 1</td> 
    </tr> 
    <tr> 
     <td class="chartSection">Chart 2</td> 
    </tr> 
    <tr> 
     <td class="chartSection">Chart 3</td> 
    </tr> 
</table> 

내가 시도하는 것 :

부트 스트랩이 제공 한 이벤트를 사용하여 팝업 후 다른 top 위치에로드하려고했습니다. popover 위에 마우스를 올려 놓을 때, 당신은 분명히 그것이 매우 나쁜 것으로 보인 움직이는 것을 볼 수 있습니다. 예 :

$('td.chartSection').on('shown.bs.popover', function() { 
    var $thisElem = $(this).find('.popover'); 
    var theTop = $thisElem.css('top'); 
    theTop = parseInt(theTop); 
    $thisElem.css('top', (theTop + 10) + 'px'); 
}); 

WORKING DEMO

Answer 1

매우 간단합니다 :

데모http://jsfiddle.net/d9qJQ/1/

.chartSection .popover { 
    margin-top:10px; //or any value that you want 
}