使引导弹出窗口显示在与其触发器不同的元素上

Question

我正在尝试使用单个“NEXT”按钮创建不同的弹出框（popover 1,2,3等...）：每个弹出框应该显示为附加到页面上的不同div。

我们正在尝试创建一个“Take a Tour”功能，其中不同的功能由不同的popovers解释。

Answer 1

手动显示/隐藏您的弹出窗口。

点击“下一步”按钮，依次显示和隐藏您的弹出式窗口：

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

以上代码尚未编译或测试。