javascript - ビューポートが変更されるまでテザー要素の位置が正しくありません

Question

私は素晴らしいプラグインで遊んでいます：テザー

ブートストラップ (v3) ポップオーバーを手動でロードするときに問題が発生しました。ビューポートの外側のポップオーバーが、ビューポートの下部の間違った位置に表示されていました。そこで、代替手段としてこのプラグインを試すことにしました。

基本的なテザー オプションを使用して、フォームの入力の 1 つを検証しようとしましたが、フォームは laravel フォーム ビルダーを使用して作成されています。(form-group入力の はターゲット要素です)。

問題：

しかし、何らかの理由で、ターゲット要素の左側 (不適切な位置) にロードされているようです。ビューポートが変更されると (ページのサイズ変更やスクロールなど)、ターゲット要素の右側 (正しい位置) に更新されます。

なぜこれを行うのかわかりませんが、これを正しい位置にロードする方法についてのアイデアはありますか?

例：

ページの読み込み (不適切な位置):

ビューポートの変更 (正しい位置):

HTML:

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

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

ジャバスクリプト:

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',
            });
   });
}