flask 鼠标进入时显示弹窗(flask 99)

    <div class="col-md-8">
        {% if photos %}
            {% for photo in photos %}
                <div class="card mb-3 w-100 bg-light">
                    <div class="card-header">
                        <a class="dead-link" href="{{ url_for('user.index', username=photo.author.username) }}">
                            <img class="rounded img-fluid avatar-s profile-popover"
                                 data-href="{{ url_for('ajax.get_profile', user_id=photo.author.id) }}"
                                 src="{{ url_for('main.get_avatar', filename=photo.author.avatar_m) }}">
                        </a>
                        <a class="profile-popover trend-card-avatar"
                           data-href="{{ url_for('ajax.get_profile', user_id=photo.author.id) }}"
                           href="{{ url_for('user.index', username=photo.author.username) }}">{{ photo.author.name }}</a>
                        <span class="float-right">
            <small data-toggle="tooltip" data-placement="top" data-timestamp="{{ photo.timestamp }}"
                   data-delay="500">
                {{ moment(photo.timestamp).fromNow(refresh=True) }}</small></span>
                    </div>

$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader('X-CSRFToken', csrf_token);
        }
    }
});

$(document).ajaxError(function (event, request, settings) {
    var message = null;
    if (request.responseJSON && request.responseJSON.hasOwnProperty('message')) {
        message = request.responseJSON.message;
    } else if (request.responseText) {
        var IS_JSON = true;
        try {
            var data = JSON.parse(request.responseText);
        }
        catch (err) {
            IS_JSON = false;
        }
        if (IS_JSON && data !== undefined && data.hasOwnProperty('message')) {
            message = JSON.parse(request.responseText).message;
        } else {
            message = default_error_message;
        }
    } else {
        message = default_error_message;
    }
    toast(message, 'error');
});

var flash = null;

function toast(body, category) {
    clearTimeout(flash);
    var $toast = $('#toast');
    if (category === 'error') {
        $toast.css('background-color', 'red')
    } else {
        $toast.css('background-color', '#333')
    }
    $toast.text(body).fadeIn();
    flash = setTimeout(function () {
        $toast.fadeOut();
    }, 3000);
}

var hover_timer = null;

function show_profile_popover(e) {
    var $el = $(e.target);

    hover_timer = setTimeout(function () {
        hover_timer = null;
        $.ajax({
            type: 'GET',
            url: $el.data('href'),
            success: function (data) {
                $el.popover({
                    html: true,
                    content: data,
                    trigger: 'manual',
                    animation: false
                });
                $el.popover('show');
                $('.popover').on('mouseleave', function () {
                    setTimeout(function () {
                        $el.popover('hide');
                    }, 200);
                });
            }
        });
    }, 500);
}

function hide_profile_popover(e) {
    var $el = $(e.target);

    if (hover_timer) {
        clearTimeout(hover_timer);
        hover_timer = null;
    } else {
        setTimeout(function () {
            if (!$('.popover:hover').length) {
                $el.popover('hide');
            }
        }, 200);
    }
}

function update_followers_count(id) {
    var $el = $('#followers-count-' + id);
    $.ajax({
        type: 'GET',
        url: $el.data('href'),
        success: function (data) {
            $el.text(data.count);
        }
    });
}

function update_collectors_count(id) {
    $.ajax({
        type: 'GET',
        url: $('#collectors-count-' + id).data('href'),
        success: function (data) {
            console.log(data);
            $('#collectors-count-' + id).text(data.count);
        }
    });
}

function update_notifications_count() {
    var $el = $('#notification-badge');
    $.ajax({
        type: 'GET',
        url: $el.data('href'),
        success: function (data) {
            if (data.count === 0) {
                $('#notification-badge').hide();
            } else {
                $el.show();
                $el.text(data.count)
            }
        }
    });
}

function follow(e) {
    var $el = $(e.target);
    var id = $el.data('id');

    $.ajax({
        type: 'POST',
        url: $el.data('href'),
        success: function (data) {
            $el.prev().show();
            $el.hide();
            update_followers_count(id);
            toast(data.message);
        }
    });
}

function unfollow(e) {
    var $el = $(e.target);
    var id = $el.data('id');

    $.ajax({
        type: 'POST',
        url: $el.data('href'),
        success: function (data) {
            $el.next().show();
            $el.hide();
            update_followers_count(id);
            toast(data.message);
        }
    });
}

function collect(e) {
    var $el = $(e.target).data('href') ? $(e.target) : $(e.target).parent('.collect-btn');
    var id = $el.data('id');

    $.ajax({
        type: 'POST',
        url: $el.data('href'),
        success: function (data) {
            $el.prev().show();
            $el.hide();
            update_collectors_count(id);
            toast(data.message);
        }
    });
}

function uncollect(e) {
    var $el = $(e.target).data('href') ? $(e.target) : $(e.target).parent('.uncollect-btn');
    var id = $el.data('id');
    $.ajax({
        type: 'POST',
        url: $el.data('href'),
        success: function (data) {
            $el.next().show();
            $el.hide();
            update_collectors_count(id);
            toast(data.message);
        }
    });
}

$('.profile-popover').hover(show_profile_popover.bind(this), hide_profile_popover.bind(this));
$(document).on('click', '.follow-btn', follow.bind(this));
$(document).on('click', '.unfollow-btn', unfollow.bind(this));
$(document).on('click', '.collect-btn', collect.bind(this));
$(document).on('click', '.uncollect-btn', uncollect.bind(this));

// hide or show tag edit form
$('#tag-btn').click(function () {
    $('#tags').hide();
    $('#tag-form').show();
});
$('#cancel-tag').click(function () {
    $('#tag-form').hide();
    $('#tags').show();
});
// hide or show description edit form
$('#description-btn').click(function () {
    $('#description').hide();
    $('#description-form').show();
});
$('#cancel-description').click(function () {
    $('#description-form').hide();
    $('#description').show();
});
// delete confirm modal
$('#confirm-delete').on('show.bs.modal', function (e) {
    $('.delete-form').attr('action', $(e.relatedTarget).data('href'));
});

if (is_authenticated) {
    setInterval(update_notifications_count, 30000);
}

$("[data-toggle='tooltip']").tooltip({title: moment($(this).data('timestamp')).format('lll')})