Make a popup download window on top of a different element than its trigger

Question

I am trying to make one NEXT button create different popovers (popover 1, 2, 3, etc.): each popover should appear on a different div on the page.

We are trying to create a “Take a Tour” functionality where different functions are explained by different popovers.

Answer 1

Show / hide your popovers manually.

When you click Next, show and hide your popovers in the 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.