Bootstrap tooltips and popover for JS dynamic entries

Question

Bootstrap 3 tooltips and popovers work perfectly within html code, but it seems it does not apply to dynamically built entries. For example :

urlline += '<a href="' + this + '" target="_blank" ';
urlline += 'data-content="' + ircline + '" ';
urlline += 'data-placement="bottom" ';
urlline += 'data-container="body" ';
urlline += 'data-toggle="popover">';
urlline += this + '</a>';

In that scenario, a hover on the created links won't show any popover . Same result with tooltips . I have popover initialized with $('[data-toggle="popover"]').popover({trigger: 'hover'}); and it works for existing HTML , just not for dynamically created entries.

I'm no JS expert so I might be missing something, any hint?

Answer 1

Are you inserting urlline into DOM using jQuery, something like this $('#somelementID').html(urlline); ? If yes, then initialize bootstrap popover/tooltip after inserting that element into DOM using jquery, using $('a#id').popover({trigger: 'hover'});

Answer 2

try use a function in js with the popover's properties even in your content you can use a ajax o put a html code or finally parameters as you prefer (this work for me in datatable):

function popovers(object, title, content, placement){
    $(objet).popover({
      html:true, 
      title: title,
      content: content,
      placement: placement
})
}