tether element position incorrect until viewport change

I have been playing around with awesome plugin: tether

I had problems with bootstrap (v3) popovers when manually loading them the popovers outside fo the viewport would display at the bottom of the viewport in the incorrect position, so I decided to experiment with this plugin as an alternative.

I have been trying to use a basic tether option to validate one of my inputs in my form, the form has been made using laravel form builder. (form-group of inputs are the target elements).

PROBLEM:

But for some reason it seems to load to the left of the target element (in the incorrect position). When the viewport changes (page resize or scroll etc) then it updates to the right of the target element(in the correct position).

Im not sure why it does this, any ideas on how I can get this to load up in correct position?

EXAMPLE:

Page Load:

Viewport Change:

HTML:

{!! Form::model( $article = new \App\Article, ['id' => 'form-article', 'route' =>'articles.store', 'class' => 'row']) !!}

<div class="form-group col-lg-12 title">
    {!! Form::text('title', null, ['id' => 'title', 'class' => 'form-control', 'placeholder' => 'Title']) !!}
</div>
<div class="row">
    <div class="form-group col-lg-12 body">
        {!! Form::textarea('body', null, ['id' => 'body', 'class' => 'form-control', 'placeholder' => 'Body']) !!}
    </div>
</div>

{!! Form::close() !!}

<script type="text/javascript">
    $( document ).ready(function()
    {
        var errors = ({!! json_encode($errors->toArray()) !!});
        var form = ({!! json_encode($form) !!});
        console.log(errors);
        outputValidationPopovers(form, errors);
    });
</script>

JAVASCRIPT:

function outputValidationPopovers(formId, errors)
{
    $.each(errors, function (eKey, messages)
    {
        var $newPopover =  $('<div class="tether-'+eKey+'">stuff</div>');
        $newPopover.css('z-index', '1030').css('background-color', 'red');
        $(formId).append($newPopover);

        new Tether(
            {
                element: '.tether-'+ eKey,
                target: '.'+eKey,
                attachment: 'middle right',
                targetAttachment: 'middle right',
            });
   });
}

via Chebli Mohamed