Make bootstrap popover appear over a different element than its trigger

Question

I'm trying to have a single "NEXT" button create different popovers (popover 1, 2, 3 etc...): Each popover should appear attached to a different div on the page.

We are trying to create a "Take a Tour" functionality where different features are explained by different popovers.

Answer 1

Show/hide your popovers manually.

On the click of your 'Next' button, show and hide your popovers in sequence:

var currentPopover = -1;
var popovers = [];

// Initialize all the popovers to be "manually" displayed.
popovers.push($("#ctrl1").popover({ trigger: 'manual' }));
popovers.push($("#ctrl2").popover({ trigger: 'manual' }));
popovers.push($("#ctrl3").popover({ trigger: 'manual' }));

// On each button click, hide the currently displayed popover
// and show the next one.
$("#NextBtn").click(function() {
  if (currentPopover >= 0) {
    popovers[currentPopover].popover('hide');
  }

  currentPopover = currentPopover + 1;
  popovers[currentPopover].popover('show');
});

The above code has not been compiled or tested.