How to move the Bootstrap Popover's position down?

Question

So basically I have a Boostrap Popover that is being created inside a parent for hovering. This way, the user can initiate the popover, and then also hover over and around the popover to click links within it.

Although, I need to slightly move this popover down approximately 10px (top value + 10px) so that the user can easily move their mouse to the popover. At the moment, the only way to move the mouse to the popover is by follwing the small arrow underneath the popover.

Here is an example:

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>

What I have tried:

I attempted to use the events that Bootstrap provide to give the popover a different top position after it is loaded. Although, when hovering over the popover, you could clearly see it moving which looked very bad. Example:

$('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

Very simple:

Demo http://jsfiddle.net/d9qJQ/1/

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