Bootstrap popover over $(this) element

Question

I have a bunch of elements dynamically created and I'm able to show the popover calling this script:

$('.gantt').popover({
    selector: '.bar',
    title: 'Test title',
    content: 'Test content',
    trigger: 'hover',
    placement: function() { return 'top' },
    container: 'body'
});

Now, I need to dynamically pass title and content from within a function and then I did like so:

[...]
onItemMouseover: function(elm, data) {
    elm.popover({
        selector: '.bar',
        title: data.title,
        content: data.content,
        trigger: 'hover',
        placement: function() { return 'top' },
        container: 'body'
    });
}
[...]

But the popover is not opening. Is there something missing?

If i call elm.remove() the element is being removed, so elm is triggering correctly the DOM element.

Answer 1

This is a patch, probably there's a better and official way of doing this, but I solved this way:

• created a popoverContent global variable
• assigned data.content to popoverContent inside onItemMouseover
• called the first version of the script and retrieved the content value from the popoverContent variable

If you have a better solution, please share.

---

UPDATE

Here's the code:

var popoverContent

$(document).ready(function () {
    createGantt(data);

    $('.gantt').popover({
        [...]
        content: function () {
            return popoverContent;
        },
        [...]
    });
}

function createGantt(data) {
    $('.gantt').gantt({
        [...]
        onItemMouseover: function(elm, data) {
            popoverContent = data.detailContent;
        },
    });
};