Bootstrap .popover() with ajax loaded data

by

I have the following setup, which makes the popover appear on the second hover event, since it is not yet been created. The data is called via ajax, and I need to somehow create the .popover() before this, yet activate it successfully afterwards.

$('.entry').on('mouseenter', function () {
    var achievementId = $(this).attr('data-entry-achievement-id');
    var entry = this;

    var entryData = function(response) {
        var result = response;
        $(entry).popover({
            html: true,
            placement: 'top',
            trigger: 'hover',
            title: result.data.definition,
            content: result.data.achieved_at
        }, "show");
    }
    $.ajax({
        type: "GET",
        url: 'href here..',
        datatype: "json",
        success: entryData,
    });
});

How can I achieve this?

36 thoughts on “Bootstrap .popover() with ajax loaded data”

Leave a Comment