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.

@Raviteja unfortunately I'm not using an online library so it might be difficult for me to replicate everything online — Mark, Nov 23 '16 at 10:48
is the popover opening ? if yes sound like your data var is not correct, console.log it — Eric V., Nov 23 '16 at 10:54
FYI http://stackoverflow.com/questions/21459042/can-i-use-dynamic-content-in-a-bootstrap-popover — Raviteja, Nov 23 '16 at 10:58
@Raviteja following the example from your link, i should retrieve the data with Ajax "on the run". This will for sure cause latency. I already have my data inside the second example. I only need to know how to open the popover... — Mark, Nov 23 '16 at 11:08
put alerts and check if your function is getting called. Also check `data.title, data.content` — Raviteja, Nov 23 '16 at 11:10
@Raviteja calling `elm.remove()` or logging data.title works correctly so: function is being called, elm contains the correct element, data contains the correct data — Mark, Nov 23 '16 at 11:15
try adding `elem.popover('show');` after `container: 'body' });` — Raviteja, Nov 23 '16 at 11:31

Mark · Accepted Answer · 2016-11-23T13:20:51.093

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

Bootstrap popover over $(this) element

1 Answers1

UPDATE

Linked