How to Bind Bootstrap Popover on Dynamic Elements

How to bind bootstrap popover on dynamic elements

Update

If your popover is going to have a selector that is consistent then you can make use of selector property of popover constructor.

var popOverSettings = {
    placement: 'bottom',
    container: 'body',
    html: true,
    selector: '[rel="popover"]', //Sepcify the selector here
    content: function () {
        return $('#popover-content').html();
    }
}

$('body').popover(popOverSettings);

Demo

Other ways:

1. (Standard Way) Bind the popover again to the new items being inserted. Save the popoversettings in an external variable.
2. Use Mutation Event/Mutation Observer to identify if a particular element has been inserted on to the ul or an element.

Source

var popOverSettings = { //Save the setting for later use as well
    placement: 'bottom',
    container: 'body',
    html: true,
    //content:" <div style='color:red'>This is your div content</div>"
    content: function () {
        return $('#popover-content').html();
    }

}

$('ul').on('DOMNodeInserted', function () { //listed for new items inserted onto ul
    $(event.target).popover(popOverSettings);
});

$("button[rel=popover]").popover(popOverSettings);
$('.pop-Add').click(function () {
    $('ul').append("<li class='project-name'>     <a>project name 2        <button class='pop-function' rel='popover'></button>     </a>   </li>");
});

But it is not recommended to use DOMNodeInserted Mutation Event for performance issues as well as support. This has been deprecated as well. So your best bet would be to save the setting and bind after you update with new element.

Demo

Another recommended way is to use MutationObserver instead of MutationEvent according to MDN, but again support in some browsers are unknown and performance a concern.

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
// create an observer instance
var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        $(mutation.addedNodes).popover(popOverSettings);
    });
});

// configuration of the observer:
var config = {
     attributes: true, 
     childList: true, 
     characterData: true
};

// pass in the target node, as well as the observer options
observer.observe($('ul')[0], config);

Demo

Dynamically added bootstrap popover not working

When you call $(".mypopover").popover(...) you add popover to all existing elements with class mypopover. In order for popover to work on dynamically added elements, you must execute the same code again. But fortunately there's better solution:

You can initialize popover on the body and make use of selector property of popover constructor in the following way:

$("body").popover({
        trigger: "click",
        sanitize: false,
        html: true,
        animation: true,
        selector: '.mypopover',
        container: '#mycontainer',
    });

Here's the fiddle.

Dynamically change content of popover in bootstrap

You can try something like this:

$('#SaveChangesBtn').on('click', function(){
if($('.popover').hasClass('in')){
    $(this).popover('hide');
}
else
{
    $(this).attr('data-content','Cannot proceed with Save while Editing a row.');
    $(this).popover('show');
}
});

This way you fix the way you are showing and hiding your popover.

Working fiddle: https://jsfiddle.net/99x50s2s/65/

How to toggle Bootstrap popover on dynamically-added elements

Well, apparently I've managed to get this working, just needed to change the popover part with these little chunck:

var popOverSettings = {
  template: newPopoverTemplate,
  html: true,
  selector: '.check-out-cell',
  content: function () {
    return $(this).parent().find('.content').html();
  }
}
$('body').popover(popOverSettings);

The importante part is the selector field, which tells the popover what element to look for for its activation.

How to bind bootstrap tooltip on dynamic elements

You need to use selector property.
See on the documentation :

"If a selector is provided, tooltip objects will be delegated to the
specified targets. In practice, this is used to enable dynamic HTML
content to have tooltips added. See this and an informative
example."

JS example code :

$('body').tooltip({
    selector: '.createdDiv'
});

$('#add-button').click(function() {
    $('<div class="createdDiv" data-toggle="tooltip" title="Some tooltip text!">Hover over me</div>').appendTo('#container');
});

DEMO

bootstrap popover to dynamically created anchor in jQuery datatable

If you are creating dynamic popovers you need to delegate them.

Try:

$( function () {
    /* delegate popover */
    $( document ).popover( {
        html: true,
        trigger: 'click', // click, hover, focus
        selector: '.refspan[data-toggle="popover"]',
        container: 'body'
    } );

    /* reference verse popup */
    $( '#bibletext' ).on( 'click', '.refspan[data-toggle="popover"]', showrefpop );
} );

function showrefpop( event ) {
    event.preventDefault();

    var self = this;
    var refverse = self.innerText;
    var passage = getPassage( refverse );
    if ( passage != undefined ) {
        dbservice.fetch( bibleConfig.geturl, passage ).done( function ( res ) {
            var verserefpopover = $( '#verserefpopover' );
            verserefpopover.html( $.parseHTML( res.versetext ) );

            var jqueryEl = $( self );
            jqueryEl.attr( 'data-content', verserefpopover.html() );
            jqueryEl.popover( 'hide' );
            jqueryEl.popover( 'show' );
        } ).fail( function ( err ) {
            siteConfig.log( err );
        } );
    }
}

Dynamically ADD a title to a Bootstrap popover

I finally found the solution using react-bootstrap and the OverlayTrigger (it also works with a simple Overlay):

https://react-bootstrap.github.io/components.html#popovers

It is very important to add the attribute shouldUpdatePosition={true}to the Overlay. This attribute is not part of the doc, but I found about it after extended research. This allows the Popover to update its position correctly when the content is modified.

Adding different Twitter Bootstrap popovers to dynamically created elements

What you need is when you add a new control add the popover at the same time:

function AddNewElement()
{
  var yourElement = '<div id="yourElementId"> The element you want </div>';
  $('divToAppend').append(youElement);

  var yourPopoverContent = 'Your Personalized popover';

  $('#yourElementId').popover({
      html : true,
      content : yourPopoverContent      
  });

}

This should work with your actual code for the popover.

Twitter Bootstrap Popovers not working for Dynamically Generated Content

You need to call $("[rel=popover]").popover({placement:'left'}); AFTER the elements are in the DOM.

UPDATE

If you are using jQuery

$(element_selector)
  // load results into HTML of element_selector
  .load('your/php/file')
  // when done, initialize popovers
  .done(function(){
    $("[rel=popover]").popover({placement:'left'});
  });

OR a catch all for jQuery ajax requests

$.ajaxComplete(function(){
    $("[rel=popover]").popover({placement:'left'});
  });

---

Related Topics