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.

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.

• javascript
• jquery
• twitter-bootstrap
• popup

Share Improve this question Follow edited Jun 17, 2013 at 19:04 madth3 7,3441212 gold badges5252 silver badges7474 bronze badges asked Jun 17, 2013 at 16:22 MaxMax 16311 silver badge1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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 piled or tested.