Rainier9 Rainier9 - 1 year ago 87
Javascript Question

Adding different Twitter Bootstrap popovers to dynamically created elements

I'm trying to add popovers to dynamically created elements. Each kind of element (either a ContentEditable or an Img or a Video) needs to have a different popover content.

Because they are dynamic elements, I'm calling the popovers as follows:

selector: '[rel=popoverImage]',
content: **popoverImage**,
html: true,
placement: 'top',
trigger: 'focus'

is a variable that has the content of the popover for the img element.

The issue comes when I try to add another popover. It doesn't show. I've tried the following:

  1. Having 2 Selectors and calling them in different

  2. Changing the
    element to a dynamically generated container.

  3. Changing the variable that has the "content" data each time a new element is focused.

Any ideas?

Answer Source

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>';

  var yourPopoverContent = 'Your Personalized popover';

      html : true,
      content : yourPopoverContent      


This should work with your actual code for the popover.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download