bootstrap popup first time hover outside visible area, second time inside visible area

Question

i had a popover issue, when i hover on elements in the lower area of the website, the popover pops up outside the visible area, if i hover the same item a second time the popover is inside the visible area.

i am using:

jquery/1.12.4 bootstrap/3.3.7

and that is the principal JS code:

    $(function() {
        $('.routine_popup').hover(
            function(event) {
                var elem = $(event.currentTarget);
                timer = setTimeout(function() {
                    timer = null;
                    xhr = $.ajax(
                        '/popupsignal/' + elem[0].id).done(
                            function(data) {
                                xhr = null;
                                elem.popover({
                                    trigger: 'manual',
                                    html: true,
                                    animation: false,
                                    container: elem,
                                    content: data
                                }).popover('show');
                            }
                    );
                }, 1000);
            },
            function(event) {
                var elem = $(event.currentTarget);
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                else if (xhr) {
                    xhr.abort();
                    xhr = null;
                }
                else {
                    elem.popover('destroy');
                }
            }
        )
    });

i am a noob at JavaScript jquery and bootstrap, websearch doesnt gave me any useful hints...thanks for your help!